kirill-konshin / next-redux-wrapper

Redux wrapper for Next.js
MIT License
2.67k stars 265 forks source link

how to implement next redux wrapper with redux toolkit without typescript? #446

Closed 360synertech-dev1 closed 1 year ago

360synertech-dev1 commented 2 years ago

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;
atalkrishna commented 1 year ago

Any activity on this

kirill-konshin commented 1 year ago

No activity. All examples have JS code too. Click expand to see.