个人中心
gpt4 book ai didi

typescript - 您正在使用遗留实现。请更新您的代码 : use createWrapper() and wrapper. useWrappedStore()。 nextjs 还原？

转载 作者：行者123 更新时间：2023-12-05 03:18:16 24 4
gpt4 key购买 nike

我在使用 redux 工具包和 next js 时遇到错误。我面临这个延迟警告-

/!\您正在使用旧版实现。请更新您的代码:使用 createWrapper() 和 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);

*** 使用相同的代码我没有收到任何警告。但是当我将我的项目更新到最新的包时，我收到了错误。

请实际帮助我根据警告更新我的代码？

最佳答案

警告来自this线。因此，只要有人使用 wrapper.withRedux 方法(旧方法)，就会出现警告。

要解决这个问题，我们必须使用 useWrappedStore 创建一个 store，并使用 react-redux 的 Provider 将 store 传递给 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;

关于typescript - 您正在使用遗留实现。请更新您的代码 : use createWrapper() and wrapper. useWrappedStore()。 nextjs 还原？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73761243/

24 4 0
文章推荐： r - 在 facet_wrap 标签上显示注释
文章推荐： javascript - 为什么 createStore 有效而 configureStore 无效？
文章推荐： c++ - 在 C++ 中像这样自动化互斥锁安全吗？
文章推荐： c++ - 如何通过 ref union 迭代 2 个 vector ？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com