import {combineReducers, createStore, applyMiddleware, compose } from 'redux ' 란 무엇인가?

1. combineReducers

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

예시) 
import { combineReducers } from 'redux';
import loadingReducer from './loadingReducer'; // 로딩 체크하기 위한 reducer
import errorReducer from './errorReducer'; // 에러를 체크하기 위한 reducer

const rootReducer = combineReducers({
  isLoading: loadingReducer,
  error: errorReducer,
});

export default rootReducer;

2. createStore

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

예시)
import { createStore } from 'redux'
import rootReducer from '../reducers'; // 어디에선가 가져오는 rootReducer

const configureStore = () => {
  const store = createStore(
    rootReducer,
  );
  return store;
}

3. applyMiddleware

applyMiddleware의 존재 이유는 redux에서 비동기를 편리하게 처리하기 위해 미들웨어를 생성하기 위해 필요한 api이다. (미들웨어는 정말 강력하다. 너무 편함...)

예시)
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../saga';

const sagaMiddleware = createSagaMiddleware();

const configureStore = () => {
  const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware),
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

4. compose

redux-saga사용을 위한 middleware를 만들때, 필요!

공식문서를 보면 compose에 대한 정의를 => 함수를 오른쪽에서 왼쪽으로 조합합니다.
이것은 함수형 프로그래밍 유틸리티로, Redux에는 편리함을 위해 포함되었습니다. 여러 스토어 함수(enhancer)들을 순차적으로 적용하기 위해 사용할 수 있습니다 라고 해놓았다.

이게 무슨 의미인지는 아래 compose의 사용법으로 알 수 있다.

예시)
import { compose } from 'redux';
(args): 인자를 받은 함수의 return 값은 왼쪽에 있는 함수의 인수로 제공되는 식으로 연속된다. 
compose(f, g, h) = (...args) => f(g(h(...args)))


import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware(); 
const configureStore = () => {
  const store = createStore(
    rootReducer,
    compose(
      applyMiddleware(sagaMiddleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__(),
    ),
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

해당 내용에 대한 자세한 탐구는 역시 공식문서이다.

(https://lunit.gitbook.io/redux-in-korean/api)해당 api 더 알아보러가기