next+ts Redux index 전체 코드 둘러보기(마지막)

store/index.ts

import {

  applyMiddleware,

  createStore,

  EmptyObject,

  Middleware,

  Store,

  StoreEnhancer,

} from "redux";

import reducers from "./reducers";

import { MakeStore, createWrapper } from "next-redux-wrapper";

import createSagaMiddleware from "redux-saga";

import { ActionProps, CounterState } from "./types/state";

import { configureStore } from "@reduxjs/toolkit";

import { initialState } from "./reducers/data";

import rootSaga from "./reducers/Sagas";

const bindMiddleware = (middleware: Middleware[]): StoreEnhancer => {

  if (process.env.NODE_ENV !== "production") {

    const { composeWithDevTools } = require("redux-devtools-extension");

    return composeWithDevTools(applyMiddleware(...middleware));

  }

  return applyMiddleware(...middleware);

};

이부분은 process.env.NODE_ENV !== "production"이 부분으로  배포인지 개발환경인지 체크를 하게 됩니다.

개발 환경이면 devtools를 활용해서 middleware를 쓰게 해주고 아닐시에 바로 applymiddleware를 사용해서 적용시켜 주게 됩니다. 

현재 코드에서는 사용되지느 않습니다.

const makestore: MakeStore<

  Store<

    {

      main: CounterState;

    },

    ActionProps

  >

> = () => {

  const sagamiddleware = createSagaMiddleware({});

  const store = configureStore({

    reducer: reducers,

    middleware: [sagamiddleware],

    devTools: process.env.NODE_ENV !== "production",

  });

  sagamiddleware.run(rootSaga);

  return store;

};

이걸로  const sagamiddleware = createSagaMiddleware({}); 사가 미들웨어를 생성해주게 됩니다.

여기서

 

 const store = configureStore({

    reducer: reducers,

    middleware: [sagamiddleware],

    devTools: process.env.NODE_ENV !== "production",

  });

middleware로 사용할 middleware넣어 주고 reducer에 사용할 데이터를 넣어주고 devtools를 활용할 조건을 넣어주시면 됩니다.

 

export const wrapper = createWrapper<

  Store<

    {

      main: CounterState;

    },

    ActionProps

  >

>(makestore, { debug: true });

여기서 저도 wrapper를 왜쓰는지 궁금해서 찾아봤는데 next의 경우 redux가 한개가 아니라 실행할때마다 여러개가 실행되어서 이것을 합쳐주는게 필요하다고 하더라고요 그래서 wrapper를 넣었습니다. 이부분은 저도 정확한건 아닙니다.

 

여기까지  전체적인 코드 설명을 끝내겠습니다. 다들 고생하셨어요