您正在使用舊版實現。請更新您的代碼：使用 createWrapper() 和 wrapper.useWrappedStore()。 nextjs redux？

Question

我在使用 redux 工具包和下一個 js 時遇到錯誤。 我面臨這個過時的警告-

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

我不明白實際問題發生在哪里，我必須更新我的代碼。

這是代碼-

這是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);

這是reducer.ts -

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

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

這是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);

*** 使用相同的代碼，我沒有收到任何警告。 但是當我將我的項目更新到最新的 package 時，我收到了錯誤消息。

請幫我實際在哪里我必須根據警告更新我的代碼？

Answer 1

似乎他們還沒有完全更新他們的文檔。 通過這個代碼示例，這就是您的MyApp的樣子：

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;

Answer 2

警告來自這一行。 因此，只要有人使用wrapper.withRedux方法（舊方法），就會出現警告。

為了解決這個問題，我們必須使用useWrappedStore創建一個store ，並使用 react-redux 的Provider將 store 傳遞給孩子：

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;

您正在使用舊版實現。請更新您的代碼：使用 createWrapper() 和 wrapper.useWrappedStore()。 nextjs redux？

問題描述

2 個解決方案

解決方案1
0 2022-09-18 09:08:17

解決方案2
0 2022-09-27 01:48:48

您正在使用舊版實現。 請更新您的代碼：使用 createWrapper() 和 wrapper.useWrappedStore()。 nextjs redux？

問題描述

2 個解決方案

解決方案1 0 2022-09-18 09:08:17

解決方案2 0 2022-09-27 01:48:48

您正在使用舊版實現。請更新您的代碼：使用 createWrapper() 和 wrapper.useWrappedStore()。 nextjs redux？

解決方案1
0 2022-09-18 09:08:17

解決方案2
0 2022-09-27 01:48:48