我目前正在开发一个项目,该项目实现了类似于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)
]
}