持久化reducer函数在typescript中为我的reducer提供类型错误

Question

我正在尝试在我的typescript react应用程序中配置react persistent。persistReducer函数正在向我的reducer提供一个类型错误，该类型为"(state:IState|undefined，action:action(=>IState"不可分配给"Reducer<未知，操作>'这是我的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，那么它工作得很好，但我会丢失操作负载的类型声明。我在网上找过，但找不到任何解决方案。

Answer 1

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

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

Answer 2

我在尝试将persister添加到根级reducer时遇到了类似的问题。我花了一些时间才找到解决方案，因此帮助人们找到解决方案：https://github.com/rt2zz/redux-persist/issues/1140对于这个问题。为了保留类型声明，我必须将persister从根级别移到特定的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状态的接口。这就是为我的设置保留类型声明的原因。我留下了一些额外的东西来帮助查看完整的设置。

Answer 3

只需设置类型即可。即：

reducer   : persistReducer(persistConfig, rootReducer) as typeof rootReducer

这也会给你自动完成的提示。