[React] 인스타 클론코딩 기록 (2) - redux

여러 페이지, 컴포넌트의 공통적인 데이터(ex 로그인 정보)를 부모에 저장하고, 자식에 잘 전달해주는 과정이 필요합니다.

이 과정을 관리, 전달 해주는 기능으로는 contextAPI(React), Redux, MobX 등이 있습니다.

 

몹엑스의 인기가 많아지고 있지만 저는 초보니 많이 쓰이는 리덕스를 사용하려고 합니다.

 

리액트는 객체나 배열로 전달된 데이터를 업데이트할 때, 불변성을 지키며 업데이트 해줘야 합니다. (...state, {  } 이런 느낌으로...)

이 과정이 참 번거롭고 해서 이후에는 immer 를 사용해 불변성을 신경쓰지 않을 방법으로 업데이트 예정입니다.

 

설치 갑니다.

react-redux, redux, next-redux-wrapper 다 설치해 줍니다.

npm i react-redux redux next-redux-wrapper

하나 더 redux 개발자 도구의 브라우저 연동을 위해 아래도 설치해 줍니다.

npm i redux-devtools-extension

 

루트 경로에 폴더 store, 그 안에 configureStore.js 생성 후 아래 작성 합니다.

enhancer를 개발용과 배포용으로 나눠두었습니다.

import { createWrapper } from 'next-redux-wrapper';
import { compose, createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from '../reducers';

const configureStore = () => {
    const middlewares = [];
    const enhancer = process.env.NODE_ENV === 'production'
        ? compose(applyMiddleware(...middlewares))
        : composeWithDevTools(applyMiddleware(...middlewares))
    const store = createStore(reducer, enhancer);
    return store;
};

const wrapper = createWrapper(configureStore, { 
    debug: process.env.NODE_ENV === 'development',
});

export default wrapper;

 

공통페이지인 pages/_app.js로 가서

configureStore.js 의 wrapper import 해주고 App(_app.js의 컴포넌트)를 wrapper.withRedux()로 감싸줍니다.

export default wrapper.withRedux(App);

 이제 잘 쪼갠 액션들을 저장할 reducers 폴더를 만들어

상태를 보낼 모든 페이지에 reducers의 내용을 import 하면 됩니다.

 

reducers/index.js 를 만들고, 기본 형태는

const initialState = {

}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        default:
            return state;
    }
}

export default reducer;

의 모양입니다. 초기 state인 initialState의 값을 action에 따라 return해 주는 방식으로 switch 문을 사용해 작성합니다.

액션의 양이 많거나 액션을 편하게 분류할 수 있다면 해당 액션들을 모아 reducers/action1.js 등으로 쪼개서 작성하는 것도 좋은 방법입니다.

 

여러개로 분리된 리듀서들을 합칠때는 쪼갠 리듀서에 state와 action들 잘 합쳐두고 reducers/index.js에서는

import { HYDRATE } from 'next-redux-wrapper';
import { combineReducers } from 'redux';

import one from './one';
import two from './two';

const rootReducer = combineReducers({
    index: (state = {}, action) => {
        switch (action.type) {
            case HYDRATE:
                return { ...state, ...action.payload};
            default:
                return state;
        }
    },
    one,
    two, 
});

export default rootReducer;

이렇게 { combineReducers }로 one, two로 나눈 파일을 합쳐줍니다.

HYDRATE는 서버사이드렌더링을 위해 index reducer를 추가해 주는 것입니다.

 

이렇게 만들어둔 reducer 그 안의 state, action들을 각 컴포넌트, 페이지 등에 사용할 수 있게 됐습니다.

 

reducer 안의 state의 구조는 백엔드 개발자와 함께...