[error] next-redux-wrapper 사용 시 Use createWrapper()

✍️ react 프로젝트에 redux를 연결하면서 발생한 에러 상황이다. 예전에 공부한 방법과 달라져서 다시 새롭게 배웠다. 해결 방안과 함께 redux연결하는 코드를 정리해 보았다. 더불어 redux dev tool 연결 코드도 정리 해 보았다.

상황

• _app.js의 App 컴포넌트에 ‘next-redux-wrapper’ 를 이용하여 store를 prop으로 연결하려는 상황
• 아래와 같은 코드를 적용

import widthRedux from 'next-redux-wrapper';
import { Provider } from 'react-redux';

const App = ({Componenet, store})=>{
	return(
		<Provider store={store}>
			<Compoenent/>
		</Provider>
	)
};

export default widthRedux({initialState, options}=>{
		const store = createStore(reducers, initialState);
		return store;

})(twitter);

• ‘You are using legacy implementation. Please update your code : use createWrapper() and wrapper .widthRedux().’ 라는 에러 문구가 뜸.

원인

• 현재 사용 하는 ‘next-redux-wrapper’ 버전 : 8.0.0
• 공식 문서 에 들어가 확인해 보니 createWrapper() 와 useWrappedStore() 를 사용하는 것으로 바뀜.

해결 방법

1. store> configureStore.js 를 만들어 store를 wrapper로 감싼다.

   import { createWrapper } from "next-redux-wrapper";
   
   import { legacy_createStore as createStore } from "redux";
   
   import reducers from "../reducers";
   
   const configureStore = () =>{
       const store= createStore(reducers, enhancer);
       return store;
   }
   
   const wrapper = createWrapper(configureStore,{
       debug: true
   });
   
   export default wrapper;

2. _app.js 에서 useWrappedStore() 를 이용하여 App 컴포넌트에 store를 연결한다.

   import React from 'react';
   import Proptypes from 'prop-types';
   import AppLayout from '../components/AppLayout';
   import { Provider } from 'react-redux';
   import wrapper from '../store/configureStore';
   
   const App = ({Component, ...rest }) => {
       const {store, props} = wrapper.useWrappedStore(rest);
       return (
           <Provider store={store}>
               <AppLayout>
                   <Component {...props.pageProps}/>
               </AppLayout>
           </Provider>
       );
   };
   
   App.Proptypes ={
       Component: Proptypes.elementType,
       store: Proptypes.object,
   }
   
   export default App;

➕ redux-devtools 연결 방법

• redux-devtools 연결 도 예전에 사용 하던 코드와 달라져서 같이 정리 한다.

  store> configureStore.js

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

import { applyMiddleware, compose, legacy_createStore as createStore } from "redux";

import reducers from "../reducers";

const configureStore = () =>{
    const middlewares = [];
    const composeEnhancers =
        typeof window === 'object' &&
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;
    const enhancer = composeEnhancers(applyMiddleware(...middlewares)) 
    const store= createStore(reducers, enhancer);
    return store;
}

const wrapper = createWrapper(configureStore,{
    debug: true
});

export default wrapper;

참고 문헌

• https://github.com/kirill-konshin/next-redux-wrapper#redux-toolkit
• https://github.com/zalmoxisus/redux-devtools-extension