如何为宽数据类型编写redux reducer



我目前正在开发一个项目,该项目实现了类似于MS project的东西——一个具有非常广泛任务属性的任务管理应用程序。

任务的超简单定义可能如下:

{
"id": 0,
"description": "Task 1",
"work": 8,
"startDate": 0,
"assignedResource": "Scott"
}

然而,预期一项任务最终可能会有50多个字段。

我是React和React Redux的新手,所以如果我误解了一些简单的方法,请原谅我,但我无法理解如何为这样的数据类型编写reducer操作。

以下是上述任务的减速器示例:

import { createSlice, current } from '@reduxjs/toolkit'
export const tasksSlice = createSlice({
name: 'tasks',
initialState: [],
reducers: {
addTask: (state, action) => {
state.push(action.payload);
},
deleteTask: (state, action) => {
return state.filter(task => task.id !== action.payload);
},
resetTasks: (state, action) => {
let tasks = action.payload;
return tasks;
},
replaceTask: (state, action) => {
const taskIndex = state.tasks.findIndex(task => task.id == action.payload.id)
return {
...state,
tasks: [
...state.tasks.slice(0, taskIndex),
action.payload,
...state.tasks.slice(taskIndex + 1)
]
}
},
setTaskDescription: (state, action) => {
state.map(t => t.id !== action.payload.id ? t : { ...t, description: action.payload.description })
} 
}
})
export const { resetTasks, addTask, deleteTask, replaceTask } = tasksSlice.actions
export default tasksSlice.reducer

我写replaceTask是为了快速地尝试只写批发发送的所需更改。但这感觉不对——我不能保证验证或某些错误的突变不会进入商店。另一方面,我无法理解必须为任务的每一个领域写一个动作。

相比之下,似乎大多数示例都希望您编写像setTaskDescription这样的操作,但这需要我编写大量的样板文件。

对于我所缺少的,有标准的做法吗?

假设您有以下任务

state = {
tasks: []
}

首先找到索引:

const taskIndex = state.tasks.findIndex(task => task.id == action.payload.id)

现在,替换它:

return {
...state,
tasks: [
...state.tasks.slice(0, taskIndex),
action.payload,
...state.tasks.slice(taskIndex+1)
]
}

相关内容

  • 没有找到相关文章

最新更新