Md *_*Ali 14 typescript redux redux-thunk react-redux redux-toolkit
我在使用 redux 工具包和 next js 时遇到错误。我面临着这个遗留警告-
/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().
我不明白问题实际发生在哪里，我必须更新我的代码。
这是代码-
这是store.ts-
import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
import { combinedReducer } from "./Reducer";
const reducer: typeof combinedReducer = (state, action) => {
if (action.type === HYDRATE) {
const nextState = {
...state,
...action.payload,
};
return nextState;
} else {
return combinedReducer(state, action);
}
};
export const makeStore = () => configureStore({ reducer });
type Store = ReturnType<typeof makeStore>;
export type AppDispatch = Store['dispatch'];
export type RootState = ReturnType<Store['getState']>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;
export const wrapper = createWrapper(makeStore);
这是reducer.ts-
import { combineReducers } from '@reduxjs/toolkit';
export const combinedReducer = combineReducers({
//All reducer
});
这是Hook.ts-
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './Store';
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
最后这里是 app.tsx-
function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<NextProgress
delay={2000}
options={{ showSpinner: false }}
color="#eb5525"
/>
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
export default wrapper.withRedux(MyApp);
*** 使用相同的代码我没有收到任何警告。但是当我将项目更新到最新包时，我收到错误。
请帮助我实际上在哪里我必须根据警告更新我的代码？
yoh*_*nes 27
警告来自这一行。因此，每当有人使用wrapper.withRedux方法（旧方法）时，就会出现警告。
为了解决这个问题，我们必须使用useWrappedStore创建一个store，并使用 react-redux 的Provider将 store 传递给子级：
import { FC } from "react";
import { Provider } from "react-redux";
import type { AppProps } from "next/app";
import { wrapper } from "../app/store";
const MyApp: FC<AppProps> = ({ Component, ...rest }) => {
const { store, props } = wrapper.useWrappedStore(rest);
const { emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<Provider store={store}>
<CacheProvider value={emotionCache}>
...
<Component {...pageProps} />
...
</CacheProvider>
</Provider>
);
};
export default MyApp;
他们似乎还没有完全更新这方面的文档。根据此代码示例，您的代码MyApp应该如下所示：
function MyApp(props: MyAppProps) {
const { Component, ...rest } = props
const { emotionCache = clientSideEmotionCache, pageProps } = wrapper.useWrappedStore(rest);
return (
<Provider store={store}>
<CacheProvider value={emotionCache}>
// ...
</CacheProvider>
</Provider>
);
}
export default MyApp;
| 归档时间： |
|
| 查看次数： |
18332 次 |
| 最近记录： |