redux 您正在使用旧版实现,请更新代码：使用createWrapper()和wrapper.useWrappedStore(). nextjs还原后的结果？

irlmq6kh 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(384)

我正面临着与使用redux工具包与next js的错误。我面临着这个lagacy警告-
/!\ 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);

***使用相同的代码，我没有得到任何警告。但当我更新我的项目到最新的包，然后我得到的错误。

请帮助我实际上在哪里我必须根据警告更新我的代码？

redux

来源：https://stackoverflow.com/questions/73761243/you-are-using-legacy-implementaion-please-update-your-code-use-createwrapper

2条答案

按热度按时间

ig9co6j11#

警告来自这一行。因此，每当有人使用wrapper.withRedux方法（旧方法）时，警告就会出现。
为了解决这个问题，我们必须使用useWrappedStore创建一个存储，并使用react-redux的Provider将存储传递给子级：

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;

赞(0）回复(0）举报 2022-11-12

deyfvvtc2#

看起来他们还没有完全更新他们的文档。this code example是你的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;

赞(0）回复(0）举报 2022-11-12

我来回答

redux 您正在使用旧版实现,请更新代码：使用createWrapper()和wrapper.useWrappedStore(). nextjs还原后的结果？

2条答案

相关问题

热门标签

最新问答