Menu
I am facing error with using redux toolkit with next js. I facing this lagacy warning-
/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().
I am not understanding where actually problem occurred and I have to update my code.
Here is code-
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;
And last 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);
*** With the same code I do not get any warning. But when I update my projects to latest package then I am getting the error.
Please help me actually where I have to update my code according to warning?
417
asked Dec 29 '25 00:12
The warning comes from this line. So the warning will come up whenever someone uses wrapper.withRedux method (the old way).
To fix this, we have to use useWrappedStore to create a store, and use react-redux's Provider to pass the store down to the children:
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;
It seems they haven't fully updated their documentation on this.
Going by this code example this is what your MyApp would have to look like:
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
