时间戳

首页 > 解决方案 > 你如何为宽数据类型编写 redux reducer？

reactjs - 你如何为宽数据类型编写 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，但这需要我编写大量样板文件。

我缺少这个标准的做法吗？

标签： reactjsreduxreact-redux

解决方案

假设您有以下任务：

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)
  ]
}

推荐阅读