Redux-middleware 01 | 개요 (필요한 경우 / 작업 환경 준비)
미들웨어가 필요한 경우
리액트 웹 애플리케이션에서 API 연동 시
→ API 요청에 대한 상태 관리 잘해야
-
예시
-
요청 시작 → 로딩 중
명시
-
요청 성공 or 실패 → 로딩 끝났음
명시
-
성공
응답에 대한 상태 관리
-
실패
에러에 대한 상태 관리
리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은)
관리 필요 시
→ 미들웨어
로 효율적인 상태 관리 가능
작업 환경 준비
- 간단한 리액트 프로젝트 (리덕스 적용) 준비
1. CRA(create-react-app)을 사용 → 새 리액트 프로젝트 생성
리액트 웹 애플리케이션에서 API 연동 시
→ API 요청에 대한 상태 관리 잘해야
예시
-
요청 시작 →
로딩 중
명시 -
요청 성공 or 실패 →
로딩 끝났음
명시-
성공
응답에 대한 상태 관리
-
실패
에러에 대한 상태 관리
-
리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은)
관리 필요 시
→ 미들웨어
로 효율적인 상태 관리 가능
- 간단한 리액트 프로젝트 (리덕스 적용) 준비
1. CRA(create-react-app)을 사용 → 새 리액트 프로젝트 생성
$ yarn create react-app learn-redux-middleware
2. 리덕스 사용 → 카운터 구현
-
필요 라이브러리들을 새 프로젝트에 설치
$ yarn add redux react-redux redux-actions
-
리덕스를 위한 코드 준비. 먼저 counter 리덕스 모듈 작성
- 코드
import { createAction, handleActions } from "redux-actions";
// 액션 타입
const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";
// 액션 생성 함수
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);
// 초기 값
const initialState = 0; // 상태는 꼭 객체일 필요가 없습니다. 숫자도 작동
// 리듀서
const counter = handleActions(
{
[INCREASE]: (state) => state + 1,
[DECREASE]: (state) => state - 1,
},
initialState
);
export default counter;
3. 루트 리듀서 생성
- 코드
import { combineReducers } from "redux";
import counter from "./counter";
const rootReducer = combineReducers({
counter,
});
export default rootReducer;
4. 스토어 생성 (src/index.js
) → Provider로 리덕스 적용
- 코드
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";*
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import rootReducer from "./modules";
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
reportWebVitals();
5. 카운터 컴포넌트 & 카운터 컨테이너 컴포넌트
-
프레젠테이셔널 컴포넌트 → components 디렉터리
컨테이너 컴포넌트 → containers 디렉터리
-
코드
import React from "react";
const Counter = ({ onIncrease, onDecrease, number }) => {
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
};
export default Counter;
import React from "react";
import { connect } from "react-redux";
import { increase, decrease } from "../modules/counter";
import Counter from "../components/Counter";
const CounterContainer = ({ number, increase, decrease }) => {
return (
<Counter number={number} onIncrease={increase} onDecrease={decrease} />
);
};
export default connect(
(state) => ({
number: state.counter,
}),
{
increase,
decrease,
}
)(CounterContainer);
6. App.js에서 CounterContainer 렌더링
- 코드
import React from "react";
import CounterContainer from "./containers/CounterContainer";
const App = () => {
return (
<div>
<CounterContainer />
</div>
);
};
export default App;
7. 작동 확인
$ yarn start
- 참고
책 '리액트를 다루는 기술' - 김민준
Author And Source
이 문제에 관하여(Redux-middleware 01 | 개요 (필요한 경우 / 작업 환경 준비)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@katej927/Redux-middleware-개요-필요한-경우-작업-환경-준비저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)