I am encountering an issue while using redux toolkit with Next.js. I am receiving the following legacy warning-
/!\ You are using a legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore().I am unsure of where the problem lies and how I need to update my code.
Here is the code snippet:
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 reducers
});
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;
And finally, here is 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);
*** I do not receive any warnings with this code. However, after updating to the latest packages in my project, I am encountering the error.
Please guide me on where exactly I need to make changes in my code based on the warning?