redux Persist-reducer函数在typescript中为我的reducer提供类型错误

hgc7kmma 于 2022-11-12 发布在 TypeScript

关注(0)|答案(3)|浏览(142)

我正在尝试在我的typescript react应用程序中配置react-persist。persistReducer函数向我的reducer提供了一个类型错误，**参数类型为'（state：I状态|未定义，操作：Action）=〉IState'不能赋值给类型为'Reducer〈unknown，Action〉'的参数。**这是我的store.ts代码。

const persistConfig = {
  key: "root",
  storage,
  stateReconciler: autoMergeLevel2,
  whiteList: ["reducer"],
};

const persistedReducer = persistReducer(persistConfig, reducer);//the type error

这是我用于我的减速器的代码

export const reducer= (state:IState=initialState, action:Action):IState=> {
    const {type, payload}=action;

    switch(type){
        case ActionType.CONNECT_META_MASK:
        return {
        ...state,
        address:payload.address,
        connection:payload.connection
        } 
        case ActionType.HOUR_PASSED:
        return {
        ...state,
        hourPassed:payload
        } 
         default:
      return state;
    }

}

I州/省

export interface IState{
    address:string,
    connection:boolean
    hourPassed:number
}

export const initialState:IState={
     address: '',
  connection: false,
  hourPassed:0
}

操作

import {ActionType} from "../types/types"

interface IMetaMaskConnection{
    type:typeof ActionType.CONNECT_META_MASK,
     payload:{
       connection:boolean,
       address:string
     }
}
interface IHourPassed{
  type:typeof ActionType.HOUR_PASSED,
  payload:number
}

export type Action = IMetaMaskConnection | IHourPassed

export const connectMetaMaskAction = (data:IMetaMaskConnection['payload']):Action => ({
  type: ActionType.CONNECT_META_MASK,
 payload:data
});
export const setHourPassed = (data:IHourPassed['payload']):Action => ({
  type: ActionType.HOUR_PASSED,
 payload:data
});

如果我使用AnyAction（从redux导出）代替Action，那么它可以正常工作，但是我丢失了我的action有效载荷的类型声明。我在网上找过了，但是没有找到任何解决方案。

redux

来源：https://stackoverflow.com/questions/69978434/persist-reducer-function-giving-type-error-to-my-reducer-in-typescript

3条答案

按热度按时间

6ss1mwsb1#

我有一个类似的问题，而试图添加persister到我的根级减速器。它花了我一些时间来找到一个解决方案，所以帮助这指导人们的解决方案：https://github.com/rt2zz/redux-persist/issues/1140。为了保留类型声明，我不得不将持久器从根级别移到特定的reducer上。下面是我使用工作类型声明实现的工作持久器：

import { configureStore, ThunkAction } from "@reduxjs/toolkit";
import { AnyAction, combineReducers } from "redux";
import thunk from "redux-thunk";

import storage from "redux-persist/lib/storage";
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
import persistReducer from "redux-persist/es/persistReducer";
import persistStore from "redux-persist/es/persistStore";

import uiReducer, { UiState } from "./reducers/uiReducer";
import apiReducer from "./reducers/apiReducer";

const persistConfig = {
  key: "ui",
  storage,
  stateReconciler: autoMergeLevel2,
};

//Couldn't get state typings if persisting root reducer. Persisted by reducer works.
const reducers = combineReducers({
  ui: persistReducer<UiState, any>(persistConfig, uiReducer),
  api: apiReducer,
});

export const store = configureStore({
  reducer: reducers,
  middleware: [thunk],
});

export const persister = persistStore(store);

// Infer the `RootState` from the store itself to set up useAppDispatch and useAppSelector hook: https://react-redux.js.org/using-react-redux/usage-with-typescript
export type RootState = ReturnType<typeof store.getState>;

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  AnyAction
>;

UiState是初始uiReducer状态的接口。这是保存我的设置的类型声明的接口。我留下了一些额外的东西来帮助查看完整的设置。

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

afdcj2ne2#

在你的根减速器中，导出其类型：

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

export const rootReducer = combineReducers({ ... });
export type RootReducer = ReturnType<typeof rootReducer>;

然后将其导入到您的存储中，并按如下所示设置persistReducer：

import { rootReducer, RootReducer } from "./reducers";

const persistedReducer = persistReducer<RootReducer>(
  persistConfig,
  rootReducer
);

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

mi7gmzs63#

只需设置类型。即：

reducer   : persistReducer(persistConfig, rootReducer) as typeof rootReducer

这应该也会给予你自动完成提示。

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

我来回答

redux Persist-reducer函数在typescript中为我的reducer提供类型错误

3条答案

相关问题

热门标签

最新问答