next-redux-wrapper
next-redux-wrapper copied to clipboard
how to implement next redux wrapper with redux toolkit without typescript?
packages versions that I am using :
next-redux-wrapper : 7.0.5 next: 12.0.7 reduxjs/toolkit: 1.7.1 react-redux: 7.2.6
I try to convert the typescript example https://github.com/kirill-konshin/next-redux-wrapper/tree/master/packages/demo-redux-toolkit
to normal js in nextjs 12 but its not working
store.js
import {configureStore, createSlice} from '@reduxjs/toolkit'
import counterReducer from './features/counter/counterSlice'
import logger from 'redux-logger'
import withRedux, {createWrapper, HYDRATE} from 'next-redux-wrapper';
export const subjectSlice = createSlice({
name: 'subject',
initialState: {} ,
reducers: {
setEnt(state, action) {
return action.payload;
},
},
extraReducers: {
[HYDRATE]: (state, action) => {
console.log('HYDRATE', state, action.payload);
return {
...state,
...action.payload.subject,
};
},
}
});
let store = configureStore({
reducer: {
counter: counterReducer,
[subjectSlice.name]: subjectSlice.reducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})
export const wrapper = createWrapper(store);
_app.js
import '../styles/globals.css';
import '../styles/main.scss';
import {Provider} from "react-redux";
import {wrapper} from "../redux/store";
import withRedux from 'next-redux-wrapper';
function MyApp({Component, ...rest}) {
const {store, props} = wrapper.withRedux(rest);
return (<Provider store={store}>
<Component {...props} />
</Provider>)
}
export default MyApp;