문제: 경고 메세지
use createWrapper() and wrapper.useWrappedStore()
원인: 공식 문서 에 들어가 확인해 보니 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;
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;
//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://velog.io/@mangojang/error-next-redux-wrapper-%EC%82%AC%EC%9A%A9-%EC%8B%9C-Use-createWrapper
https://github.com/kirill-konshin/next-redux-wrapper#redux-toolkit
https://github.com/zalmoxisus/redux-devtools-extension