combineReducers , createStore , applyMiddleware[Redux]

1. combineReducers

redux를 사용시, 유의할 점은 앱에 하나 이외의 스토어를 만들면 안된다는 것이다. 그렇기에 코드의 유지보수를 위해서 단위별로 reducer를 분기하여 사용하게 되는게 일반적인데 => 이때, 여러개의 reducer들을 단!!! 하나의 reducer로 사용하기 위해 combineReducers가 필요하다

 

 

const { combineReducers } = require('redux');
const userReducer = require('./user');
const postReducer = require('./post');

module.exports = combineReducers({
  user: userReducer,
  posts: postReducer,
});

 

 

 

2. createStore

앱 내에, 단 하나만 존재해야하는 => 앱의 상태 트리 전체를 보관하는 Redux 스토어를 만들때 쓰인다.

const reducer = require('./reducers');

const initialState = {
  user: {
    isLoggingIn: true,
    data: null,
  },
  posts: [],
};

const enhancer = applyMiddleware(//미들웨어들을 적용해주는 함수,devtool같은것도 연결해줌
  firstMiddleware,
  thunkMiddleware,
);

const store = createStore(reducer, initialState, enhancer);

 

3. applyMiddleware

applyMiddleware의 존재 이유는 redux에서 비동기를 편리하게 처리하기 위해 미들웨어를 생성하기 위해 필요한 api이다.(dispatch 와 reducer사이에 동작하는게 미들웨어다.)

 

import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);

ReactDOM.render(
    <Provider
        store={createStoreWithMiddleware(
            Reducer,
            window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
        )}
    >
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
    , document.getElementById('root'));

 

 

 

 

 

 

 

 

참고 : API 레퍼런스 - Redux (gitbook.io

API 레퍼런스 - Redux