[next.js] redux devtools 세팅법

redux devtools

• npm i redux-devtools-extension
• 예전이랑 세팅법이 약간 달라졌는데, 요즘 세팅법이 더 간결해졌다.

react에서 redux devtools 사용하기

• next.js 와 미들웨어 없이 오직 react.js만 사용할 때 세팅하는 순서이다.
• store를 생성할때 reducer와 composeWithDevTools()를 같이 넣어준다.
• Provider에 바로 store를 주입하면 끝이라 되게 간단하다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './modules'; // index 생략 가능
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root'));

next.js에서 redux devtools 사용하기

• next-redux-wrappe가 필요하다.
• redux의 middleware와 devtools 적용하는 순서
  • middlewares 배열에 목록을 담고 미들웨어를 적용(applyMiddleware())한다.
  • enhancer는 미들웨어 적용한 것에 redux devtools를 합성(composeWithDevTools())한다.
  • store는 생성할때(createStore()) enhancer를 대입해서 미들웨어를 사용한다.

import React from 'react';
import AppLayout from '../components/AppLayout';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducer from '../reducers';
import withRedux from 'next-redux-wrapper';
import { composeWithDevTools } from 'redux-devtools-extension';

const Root = ({ Component, store }) => {
  return (
    <Provider store={store}>
      <AppLayout>
        <Component />
      </AppLayout>
    </Provider>
  );
};

export default withRedux((initialState, options) => {
  // redux middlewares
  const middlewares = [];
  const enhancer = composeWithDevTools(applyMiddleware(...middlewares));
  const store = createStore(reducer, initialState, enhancer);
  return store;
})(Root);