[Redux] 미들웨어, reducer setting

Redux store

모든 state을 store안에 관리하다.
state을 변경하려면 dispatch > action을 사용한다.
action은 객체 형태여야 한다.(Plain object)
promise나 function형태로 전달받는 경우에는 store에서 받을 수 없기 때문에 redux-promise와 redux-thunk를 미들웨어로 받아 사용한다.

미들웨어

redux-thunk

dispatch에게 function형태의 데이터가 왔을 때 대처해야 할지 store에게 알려준다.

redux-promise

dispatch에게 promise형태의 데이터가 왔을 때 어떻게 대처해야 할지 store에게 알려준다.

예) 로그인 유저 정보를 리덕스 스토어에 저장하는 과정

1. redux와 어플리케이션 연결

import {provider} from 'react-redux';
    <Provider >
      <App/>
    </Provider>

2. 미들웨어 연결

import { createStore, applyMiddleware} from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';

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

• createStore로 store를 만들 때, function 과 promise형태도 처리할 수 있도록 promiseMiddleware와 ReduxThunk를 넣어서 applyMiddleware한다.
• 이것을 createStoreWithMiddleware에 할당해주었다. 말그대로 미들웨어와 함께 생성한 새로운 store이기 때문.

3. reducer

reducer/index.js

import { combibeReducers} from 'redux';
// import user from './user_reducer';
// import chatRoom from './chatRoom_reducer';

const rootReducer = combineReducers({

})

export default rootReducer;

index.js

import Reducer from './redux/reducers';

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

위에서 리덕스와 어플리케이션을 연결시키기 위해 감싸주었던 Provider태그에서, store에 reducer를 전달한다. 생성해놓은 createStoreWithMiddleware에 reducer와 확장프로그램을 위한 나머지 인자를 넣어준다.

combine reducer

store 내부에는 여러 reducer가 있다.
reducer는 state가 어떻게 변화하는지 보여주고, 변화한 마지막 값을 리턴한다.
user에 관한 state, 기타 다른 기능에 관한 state등에 따라 각각 reducer가 존재한다.

combineReducer를 이용하면 root reducer에서 하나로 이들을 합쳐줄 수 있다.

reducer/index.js

import { combibeReducers} from 'redux';
// import user from './user_reducer';
// import chatRoom from './chatRoom_reducer';

const rootReducer = combineReducers({
	user
})

export default rootReducer;