Redux thunk

dispatch를 한번에 묶어서 할 수 있게 해준다. redux-middleware: redux 기능을 향상 시켜주는 역할

Redux를 사용하면서 비동기적으로 작업을 처리하기 위해 thunk를 사용한다. redux-thunk도 좋지만 비동기처리에 있어
편리한 기능이 많은 redux-saga를 사용할 계획이기에  나는 이번 프로젝트에서는 일어나는 모든 액션들의 대해 살피고자
이 미들웨어를 추가했다. (추후 발생하는 버그나 에러를 잡기위함임)

redux-thunk, (비동기 action creator 하나 추가) 일어나는  모든 액션 console.log에 담기

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

import reducer from '../reducers';

const loggerMiddleware =
  ({ dispatch, getState }) =>
  (next) =>
  (action) => {
    console.log('loggerMiddleware(redux-thunk): ', action);
    return next(action);
  };

const configureStore = () => {
  const middlewares = [loggerMiddleware]; // 미들웨어들을 넣으면 된다.
  const enhancer =
    process.env.NODE_ENV === 'production'
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));
  const store = createStore(reducer, enhancer);
  return store;
};

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