Moh*_*ele 7 reactjs redux react-redux next.js
我在 next js 13 和 redux 中使用应用程序目录。我有多个 redux 减速器，所以我需要使用next-redux-wrapperpackage.json 将它们组合起来。使用旧方法时，export default wrapper.withRedux(RootLayout);它可以工作，但不适用于其他浏览器。它显示一个警告/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().。所以我更新了我的layout.js.
"use client";
import { ChakraProvider } from "@chakra-ui/react";
import "../styles/globals.css";
import { Provider } from "react-redux";
import { wrapper } from "../store";
function RootLayout({ children }) {
const { store } = wrapper.useWrappedStore();
return (
<html>
<head />
<body className="max-w-7xl mx-auto">
<Provider store={store}>
<ChakraProvider>{children}</ChakraProvider>
</Provider>
</body>
</html>
);
}
export default RootLayout;
const { store } = wrapper.useWrappedStore();但当我使用它时，它显示在线有错误TypeError: Cannot read properties of undefined (reading 'initialState')。那么我如何在 Next JS 13 中使用 redux 呢？
store.js
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import menuReducer from "./slices/menuSlice";
import livingReducer from "./slices/livingSlice";
import {} from "react-redux";
import { ActionTypes } from "@mui/base";
const combinedReducer = combineReducers({
menu: menuReducer,
living: livingReducer,
});
const reducer = (state, action) => {
if (ActionTypes.type === HYDRATE) {
const nextState = {
...state,
...action.payload,
};
return nextState;
} else {
return combinedReducer(state, action);
}
};
const store = configureStore({
reducer: reducer,
});
const makeStore = () => store;
export const wrapper = createWrapper(makeStore);
请帮忙
从useWrappedStore 的源代码来看，它期望将初始状态传递到函数调用中。像这样的东西：
const { store } = wrapper.useWrappedStore({ initialState: { foo: "bar" } });
这应该可以解决您的错误。
| 归档时间： |
|
| 查看次数： |
5149 次 |
| 最近记录： |