我正在开发这个 React 演示项目，其中使用了 redux。该应用程序的逻辑是完全基本的，只是为了练习目的，但一个未知的错误让我不知所措。我定义了一个 redux 存储并在两个组件中使用它，应用程序正常工作，浏览器控制台中没有警告，但无论我如何尝试修改代码，IDE 中的错误都不会消失。
如果有人能帮助我，我将不胜感激。
<html>TS2322: Type 'Reducer<ItemState>' is not assignable to type 'Reducer<ItemState, UnknownAction, Task[]>'.<br/>Types of parameters 'state' and 'state' are incompatible.<br/>Type 'ItemState | Task[] | undefined' is not assignable to type 'ItemState | undefined'.<br/>Property 'tasks' is missing in type 'Task[]' but required in type 'ItemState'.
这就是 redux 存储的定义方式：
import {configureStore, createSlice, PayloadAction} from '@reduxjs/toolkit'
interface Task {
id: number,
title: string
description: string
date: any
}
interface ItemState {
tasks: Task[]
}
interface RootState {
tasks: ItemState
}
const saveState = (state: ItemState) => {
const savedState = JSON.stringify(state)
localStorage.setItem('saveFile', savedState)
}
const loadState = (): ItemState | undefined => {
const savedState = localStorage.getItem('saveFile')
if (savedState) {
const parsedState = JSON.parse(savedState)
return {tasks: parsedState || []}
}
return undefined
}
const itemSlice = createSlice({
name: 'addNew',
initialState: {tasks: []} as ItemState,
reducers: {
addNewTask(state, action: PayloadAction<Task>) {
state.tasks.push(action.payload)
}
}
})
const mainStore = configureStore({
reducer: {tasks: itemSlice.reducer},
preloadedState: loadState()
})
mainStore.subscribe(() => {
saveState(mainStore.getState().tasks)
})
export default mainStore;
export type {RootState}
export const reduxActions = itemSlice.actions
export {itemSlice}
我认为没有必要在其他组件中共享存储用法，因为当我添加本地存储（特别是 lodadState() 函数）时发生错误。
问题是
saveStatestate.tasks 状态，但 preloadedState 需要一个 整个状态对象，例如RootState 类型，但 loadState 只返回 state.tasksItemStateconst saveState = (state: RootState) => { // <-- entire state
const savedState = JSON.stringify(state);
localStorage.setItem("saveFile", savedState);
};
const loadState = (): RootState | undefined => {
const savedState = localStorage.getItem("saveFile");
if (savedState) {
const parsedState = JSON.parse(savedState);
return { tasks: parsedState || [] }; // <-- entire state
}
return undefined;
};
const mainStore = configureStore({
reducer: {
tasks: itemSlice.reducer,
},
preloadedState: loadState(), // <-- entire state
});
mainStore.subscribe(() => {
saveState(mainStore.getState()); // <-- entire state
});
修复逻辑以仅加载部分
state.tasksconst saveState = (state: ItemState) => { // <-- state.tasks
const savedState = JSON.stringify(state);
localStorage.setItem("saveFile", savedState);
};
const loadState = (): RootState | undefined => {
const savedState = localStorage.getItem("saveFile");
if (savedState) {
const parsedState = JSON.parse(savedState);
return { tasks: { tasks: parsedState || [] }}; // <-- entire state
}
return undefined;
};
const mainStore = configureStore({
reducer: {
tasks: itemSlice.reducer,
},
preloadedState: loadState(), // <-- entire state
});
mainStore.subscribe(() => {
saveState(mainStore.getState().tasks); // <-- state.tasks
});