npm i redux react-redux redux-saga
npm i -D redux-devtools-extension redux-logger
redux : 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리.
react-redux : redux와 react를 연동해주는 라이브러리.
redux-saga : 비동기 작업을 처리하는데 도와주는 redux 미들웨어.
redux-devtools-extension : redux 개발자 도구(크롬)
redux-logger : 디스패치될 될 때마다 액션의 정보와 액션이 디스패치 되기 전 후의 상태를 콘솔에 보여주는 로깅 미들웨어.
// src/reducer/index.js
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
// 설정한 reducer
});
export default rootReducer;
combineReducers를 사용하여 reducer들을 하나로 합쳐 하나의 Reducer로 관리할 수 있다.
// src/saga/index.js
import { all, fork } from 'redux-saga/effects';
export default function* rootSaga() {
yield all([
// 설정한 saga
]);
}
rootReducer 처럼 각각의 saga 파일들을 컴바인 역할을 해준다.
// src/store/index.js
import { applyMiddleware, createStore } from 'redux'; // createStore 적용 문제로 redux version 4.1.2 로 낮춰서 사용
import createSagaMiddleware from '@redux-saga/core';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createLogger } from 'redux-logger';
import rootReducer from '../reducer';
import rootSaga from '../saga';
const logger = createLogger(); // 로거 미들웨어 활성화
const sagaMiddleware = createSagaMiddleware(); // 사가 미들웨어 활성화
const store = createStore( // store 생성
rootReducer,
composeWithDevTools(applyMiddleware(logger, sagaMiddleware)) // redux 개발자도구 활성화
);
export const sagaRun = () => {
sagaMiddleware.run(rootSaga); // sagaMiddleware에 rootSaga 바인딩
}
export default store;
store는 앱의 전체 상태를 저장하고 있다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store, { sagaRun } from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}> // Provider store 등록
<App />
</Provider>
);
sagaRun(); // sagaRun 실행