0

I am getting this error /!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore(). when I compile my application. The application works fine, but I do not know why I get the error. I tried configuring similar to other projects on google and nothing seems to work.

I tried using this solution, but had no luck. Not sure how to fix this.

Here is my _app.tsx

import type { AppProps } from 'next/app'
import { Toaster } from 'react-hot-toast';
import { useRouter } from 'next/router';
import { wrapper } from '../features/store';
import useAuth from '../hooks/useAuth';
import useDarkMode from '../hooks/useDarkMode';
import '../styles/global.css';

const App = ({ Component, pageProps }: AppProps) => {
    useAuth();
    useDarkMode();
    const router = useRouter();

    return (
        <main>
            <Component {...pageProps} key={router.asPath} />
            <Toaster
                position="bottom-center"
                toastOptions={{
                    duration: 3000,
                }}
            />
        </main>
    )
};

export default wrapper.withRedux(App);

here is index.tsx

import { useEffect } from "react";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
import { User } from "../domain/accounts/user";
import Loading from "../icons/Loading";
import useUser from "../hooks/useUser";

const Home = () => {
    const user = useUser();

    const router = useRouter();

    useEffect(() => {
        if (user.isAuthenticated !== null) {
            if (user.isAuthenticated) router.push('/home');
            if (!user.isAuthenticated) router.push('/explore')
        }
    }, [user.isAuthenticated]);

    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            minHeight: '95vh',
        }}>
            <Loading height={80} width={80} />
        </div>
    );
}

export default Home;

here is store.js

import { configureStore } from "@reduxjs/toolkit";
import { userSlice } from "./user";
import { userPreferenceSlice } from "./userPreference";
import { createWrapper } from "next-redux-wrapper";

const makeStore = () => {
    return configureStore({
        reducer: {
            user: userSlice.reducer,
            userPreference: userPreferenceSlice.reducer,
        },
    });
}

export const wrapper = createWrapper(makeStore);
rockets4all
  • 684
  • 3
  • 8
  • 32

1 Answers1

0

Did you try npm install next-redux-wrapper

Then, in _app.tsx try replaceing the wrapper.withRedux import with import { useWrappedStore } from "next-redux-wrapper";

And instead of using the wrapper.withRedux function, try using the useWrappedStore method:

const MyAppWithRedux = useWrappedStore(MyApp);

export default MyAppWithRedux;

Roman
  • 1
  • 2