[英]How to use next redux wrapper with redux toolkit without typescript?
I have a redux store created using javascript, and I am unable to use next redux wrapper with it.我有一个使用 javascript 创建的 redux 商店,我无法使用下一个 redux 包装器。
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:这是我的_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);
This code does not work, it does not call the HYDRATE
in the extra reducers.此代码不起作用,它不会在额外的减速器中调用HYDRATE
。 Also I want to add builder cases to the extra reducers function, how can I do it while using HYDRATE?我还想将生成器案例添加到额外的减速器 function,在使用 HYDRATE 时我该怎么做? What am I doing wrong here?我在这里做错了什么?
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.正如您在标题中提到的 TS,我不确定您的问题与 TypeScript 有什么关系。 Maybe there is another part to your question that is not clear to me - in that case, please specify.也许您的问题的另一部分我不清楚 - 在这种情况下,请说明。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.