我在使用 redux 工具包和 next js 时遇到错误。我面临着这个遗留警告-
/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().
我不明白问题实际发生在哪里，我必须更新我的代码。
这是代码-
this is 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);
Here is reducer.ts-
import { combineReducers } from '@reduxjs/toolkit';
export const combinedReducer = combineReducers({
//All reducer
});
Here is 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);
*** 使用相同的代码我没有收到任何警告。但是当我将项目更新到最新包时，我收到错误。
请帮助我实际上在哪里我必须根据警告更新我的代码？
