next-redux-wrapper initialStateFromGSPorGSSR Redux implementation in nextjs

Question

There's no data in initialState but there's data in initialStateFromGSPorGSSR, I think there might be an error about reducers and I couldn't solve it.

This is the log that returned from browser console;

*4. withRedux(MyApp) created new store with {initialState: undefined, initialStateFromGSPorGSSR: {…}}
initialState : undefined
initialStateFromGSPorGSSR : {videosSlice: {…}}
[[Prototype]] : Object*

And this is the log that returns frequently from the vscode terminal;

*1. getProps created store with state { videosSlice: { items: [] } }
3. getProps after dispatches has store state {
  videosSlice: {
    items: [
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
    ]
  }
}
4. withRedux(MyApp) created new store with {
  initialState: undefined,
  initialStateFromGSPorGSSR: { videosSlice: { items: [Array] } }*

store.js


    import { configureStore, combineReducers } from "@reduxjs/toolkit";
    import videosSlice from "./video-slice";
    import { HYDRATE, createWrapper } from "next-redux-wrapper";
    
    const combinedReducer = combineReducers({
      videosSlice,
    });
    
    const masterReducer = (state, action) => {
      if (action.type === HYDRATE) {
        const nextState = {
          ...state,
          ...action.payload.data,
        };
        return nextState;
      } else {
        return combinedReducer(state, action);
      }
    };
    
    export const makeStore = () => {
      return configureStore({
        reducer: masterReducer,
      });
    };
    
    export const wrapper = createWrapper(makeStore, { debug: true });

slice.js


    import { createSlice } from "@reduxjs/toolkit";
    
    const videosSlice = createSlice({
      name: "videos",
      initialState: {
        items: [],
      },
      reducers: {
        getAllVideos(state, action) {
          state.items = action.payload.data;
        },
      },
    });
    
    export const { getAllVideos } = videosSlice.actions;
    
    export default videosSlice.reducer;

page.js


    import { wrapper } from "../redux/index";
    import { getAllVideos } from "../redux/video-slice";
    import { useSelector } from "react-redux";
    
    export default function Home(props) {
      const videos = useSelector((state) => state.videosSlice.items);
    
      return (
        <Fragment>
          <Head>
            <title>My App</title>
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <Header />
          <VideosList videos={videos} />
        </Fragment>
      );
    }
    
    export const getServerSideProps = wrapper.getServerSideProps(
      (store) => async () => {
        const res = await fetch("https://dummyjson.com/products");
        const { products: data } = await res.json();
    
        store.dispatch(
          getAllVideos({
            data: data || [],
          })
        );
      }
    );

There's no error about getting data btw. It might be about HYDRATE and reducers.

If there's someone know how to use redux in next project please reach me on here or discord. I need help :) Discord:DeadhorAlive#6795

next-redux-wrapper initialStateFromGSPorGSSR Redux implementation in nextjs

0 Answers0