Question

我有一个React应用程序，我使用Redux来管理状态。我让减速机工作正常，并且我已经成功地通过了我需要的动作和数据。问题是，到目前为止，我只使用字符串，所以我一直在使用.set方法来更新状态。

现在，我需要通过特定的索引号更新数组，但我没有运气。

通过我的研究，我尝试过使用.update方法，但这对我来说也不起作用。另一个解决方案建议映射状态并修改索引号，但这似乎有点矫枉过正。

以下是我的状态对象：

const initialState = fromJS({
    items: []
});

通过componentWillMount函数，我通过调用state.set('items', action.items);

成功地使用AJAX调用填充items数组

现在，我无法弄清楚如何用索引号更新该数组中的单个项目。我能够使用Immutable获取索引号，但我不知道如何正确更新单个数组对象。

我的减速机设置如下：

function reducerName(state = initialState, action) {
    switch(action.type) {
        case TOGGLE_COMPLETED:
            let index = state.get('items').findIndex( (item) => { return item.id === action.reminder_id});
            return state
                .setIn(['items', index, 'completed'], true)
    }
}

关于如何更新数组中的单个索引而不是整个数组的任何想法？

Answer 1

我假设您拥有关于您的操作的索引和更新信息，如果您不这样做，您将需要一种不同的方法......但是使用{{3}会是这样的事情}：

function reducerName(state = initialState, action) {
  switch(action.type) {
    case TOGGLE_COMPLETED:
        return state
            .setIn(['items', action.index], action.updatedData)

  }
}

通过一个简单的例子来看这个小提琴 - setIn

Answer 2

对于数组变异，您可以将es6 spread operator与slice，concat，

一起使用

i）将数组升级到修改后的索引，然后

ii）附加修改过的数据。

iii）之后添加其他数据，以便您的州不会发生变异。

function reducerName(state = initialState, action) {
switch(action.type) {
    case TOGGLE_COMPLETED:
        const data = {};
        data.completed = !action.completed;
        let index = state.get('items').findIndex( (item) => { return item.id === action.reminder_id});
    return {
      ...state,
      todos: [...todos.slice(0, index).concat([data]), ...todos.slice(index + 1)],
  };
 }
}

如何在React / Redux环境中更新不可变数组？

2 个答案: