如何在沒有 typescript 的情況下將下一個 redux 包裝器與 redux 工具包一起使用？

Question

我有一個使用 javascript 創建的 redux 商店，我無法使用下一個 redux 包裝器。

這是我的切片：

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;

這是我的商店代碼：

// 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);

這是我的_app.js組件：

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);

此代碼不起作用，它不會在額外的減速器中調用HYDRATE 。 我還想將生成器案例添加到額外的減速器 function，在使用 HYDRATE 時我該怎么做？ 我在這里做錯了什么？

Answer 1

你可以做

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

正如您在標題中提到的 TS，我不確定您的問題與 TypeScript 有什么關系。 也許您的問題的另一部分我不清楚 - 在這種情況下，請說明。