Question

我的Redux商店中的数组中有一个JSON对象

editor: [] 1 item
    0: {} 1 key
      flow {}  3 keys
         id: "1234"
         name: "qaz"
         tasks: [] 5 items

更新或插入新的任务数组

的最佳方法是什么？

我的行动是

export function insertTasks(tasks) {
  return {
    type: 'INSERT_TASKS',
    tasks
  };
}

而且Reducer是

   case 'INSERT_TASKS':
       state[0].flow.tasks = [];
       state[0].flow.tasks = action.tasks;
       return state;

我正确地传递了action.type和action任务，我似乎正在更新对象中的tasks数组。但是这个减速器代码感觉不太正确。

当我添加一个全新的流程时，我的减速器是

case 'ADD_FLOW':   
            state = [];
            return [
              ...state, {
               // index: 1,
                flow : action.flow
              }
          ]

感觉好多了。所以我想我正在寻找在Redux中访问深度数组的最佳方法。

Answer 1

您可以根据需要继续使用扩展语法。例如，鉴于此：

var o = {
  foo: bar,
  baz: {
    id: 1,
    title: 'title',
    description: 'description'
  },
  bang: [1, 2, 3]
};

然后返回：

return {
  ...o,
  baz: {
    ...o.baz,
    description: 'new description'
  },
  bang: [...o.bang, 4, 5]
};

将导致：

{
  foo: bar,
  baz: {
    id: 1,
    title: 'title',
    description: 'new description'
  },
  bang: [1, 2, 3, 4, 5]
}

Answer 2

您希望避免在reducer中重新分配或改变任何内容。要实现这一点，假设您的状态数组中只有一个项目，您可以执行以下操作：

case 'INSERT_TASKS':
  return [{
    ...state[0],
    tasks: actions.tasks,
  }];

传播（...）运算符在此处执行的操作是从state[0]获取所有密钥并使用当前位于state[0]的所有相同密钥创建一个新对象，之后我们用新任务数组替换tasks密钥。

更新/插入嵌套对象React / Redux

2 个答案: