How to use next redux wrapper with redux toolkit without typescript?

Question

I have a redux store created using javascript, and I am unable to use next redux wrapper with it.

Here is my slice:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
import { HYDRATE } from "next-redux-wrapper";

export const getCurrentUser = createAsyncThunk(
  "counter/getCurrentUser",
  async () => {
    const res = await axios.get("http://localhost:8000/get-current-user", {
      withCredentials: true,
    });
    return res.data;
  }
);

const userSlice = createSlice({
  name: "user",
  initialState: {
    username: null,
    email: null,
    firstName: null,
    lastName: null,
    gender: null,
    dob: null,
  },
  reducers: {
    changeUser: (state, action) => {
      return action.payload;
    },
    clearUser: () => {
      return {
        username: null,
        email: null,
        firstName: null,
        lastName: null,
        gender: null,
        dob: null,
      };
    },
  },
  // extraReducers(builder) {
  //   builder.addCase(getCurrentUser.fulfilled, (state, action) => {
  //     return action.payload;
  //   });
  // },
  extraReducers: {
    HYDRATE: (state, action) => {
      console.log("HYDRATE", state, action.payload);
      return {
        ...state,
        ...action.payload.subject,
      };
    },
  },
});

export const { changeUser, clearUser } = userSlice.actions;

export default userSlice.reducer;

Here is my store code:

// TODO add HYDRATE wrapper nextjs
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";
import emailReducer from "./emailSlice";
import { createWrapper } from "next-redux-wrapper";

const makeStore = () =>
  configureStore({
    reducer: {
      user: userReducer,
      email: emailReducer,
    },
    devTools: true,
  });

export const wrapper = createWrapper(makeStore);

Here is my _app.js component:

function MyApp({ Component, ...rest }) {
  const router = useRouter();
  const { store, props } = wrapper.useWrappedStore(rest);
  const { pageProps } = props;

  return (
    <>
      <Provider store={store}>
        <Header />
        <AnimatePresence initial={false} mode="wait">
          <App>
            <Component {...pageProps} key={router.pathname} />
          </App>
        </AnimatePresence>
      </Provider>
    </>
  );
}

const App = ({ children }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    console.log("Calling dispatch in backend");
    dispatch(getCurrentUser());
  });
  return <>{children}</>;
};

export default wrapper.withRedux(MyApp);

This code does not work, it does not call the HYDRATE in the extra reducers. Also I want to add builder cases to the extra reducers function, how can I do it while using HYDRATE? What am I doing wrong here?

Answer 1

You can just do

   extraReducers(builder) {
     builder.addCase(HYDRATE, (state, action) => {
       // your logic here
     });
   },

I am not sure what your question has to do with TypeScript, as you mention TS in the title. Maybe there is another part to your question that is not clear to me - in that case, please specify.