typescript - Du bruker en gammel implementering. Vennligst oppdater koden din: bruk createWrapper() og wrapper.useWrappedStore(). nextjs redux?

Jeg opplever en feil når jeg bruker Redux Toolkit med Next.js. Jeg får denne legacy-advarselen-

/!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().

Jeg forstår ikke helt hvor problemet faktisk oppstod, og jeg må oppdatere koden min.

Her er kode-

dette er 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);

Her er reducer.ts-

import { combineReducers } from '@reduxjs/toolkit';

export const combinedReducer = combineReducers({
    //All reducer
});

Her er 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;

Og til slutt her er 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);

*** Med den samme koden får jeg ingen advarsel. Men når jeg oppdaterer prosjektene mine til den nyeste pakken, får jeg feilen.

Vennligst hjelp meg faktisk hvor jeg må oppdatere koden min i henhold til advarselen?

Svar #1

Advarselen kommer fra denne linjen. Så advarselen vil dukke opp når noen bruker wrapper.withRedux-metoden (den gamle måten).

For å fikse dette må vi bruke useWrappedStore for å opprette en store, og bruke react-redux's Provider for å sende store ned til barna:

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;

Relaterte artikler