[React] Redux 설정하기

Tim·2022년 5월 4일
0

ReactJS

목록 보기
4/5
post-thumbnail

1. Redux 설치

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 : 디스패치될 될 때마다 액션의 정보와 액션이 디스패치 되기 전 후의 상태를 콘솔에 보여주는 로깅 미들웨어.

2. Redux 기본 설정

reducer

// src/reducer/index.js

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
	// 설정한 reducer
});

export default rootReducer;

combineReducers를 사용하여 reducer들을 하나로 합쳐 하나의 Reducer로 관리할 수 있다.

saga

// src/saga/index.js

import { all, fork } from 'redux-saga/effects';

export default function* rootSaga() {
    yield all([
    	// 설정한 saga
    ]);
}

rootReducer 처럼 각각의 saga 파일들을 컴바인 역할을 해준다.

store

// 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는 앱의 전체 상태를 저장하고 있다.

index.js

// 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 실행
profile
HTML5, CSS3, JavaScript, Typescript, React 프론트엔드 개발자입니다.

0개의 댓글