Redux reducer，检查状态数组中是否存在值并更新状态答案

【问题标题】：Redux reducer, check if value exists in state array and update stateRedux reducer，检查状态数组中是否存在值并更新状态
【发布时间】：2016-06-17 18:50:35
【问题描述】：

所以我有一个数组chosenIds[]，它基本上包含一个ids (numbers) 的列表。但我无法访问减速器中的状态以检查 ID I parsed to my action 是否在数组中。

  const initialState = {
  'shouldReload': false,
  'chosenIds': [],
};

export default function filter(state = initialState, action) {
  switch (action.type) {


 case ADD_TYPE:
      console.log(state.chosenIds, "Returns undefined???!!!");

      // Check if NUMBER parsed is in state
      let i = state.chosenIds.indexOf(action.chosenId);

      //If in state then remove it
      if(i) {
        state.chosenIds.splice(i, 1);
        return {
          ...state.chosenIds,
          ...state.chosenIds
        }
      }
      // If number not in state then add it 
      else {
        state.chosenIds.push(action.chosenId)
        return { ...state.chosenIds, ...state.chosenIds }
      }

我不确定发生了什么...但是当我登录state.chosenIds 时，它返回未定义？它甚至不返回初始的空数组 [] 。

基本上这个函数要做的是检查action.chosenId是否在state.chosenIds中，如果是，则删除action.chosenId值，如果不是，则将action.chosenId添加到国家。

【问题讨论】：

这意味着它已经通过了一个状态，但该状态不包含键“chosenIds”。你能告诉我们你是如何调度动作的吗？
状态对象的其余部分是什么样的？

标签： arrays reactjs redux reducers

【解决方案1】：

我在这里看到了一些不同的问题。

首先，您在已处于该状态的阵列上使用splice() 和push()。那是直接突变，它破坏了 Redux。您需要制作数组的副本，然后修改该副本。

其次，对象传播的使用看起来不正确。您正在使用它，就好像“chosenIds”是一个对象，但它是一个数组。此外，您正在复制点差。这导致返回的状态不再具有名为“chosenIds”的字段。

第三，如果没有找到 Array.indexOf() 则返回 -1，这实际上算作“真实”，因为它不是 0。因此，当前的 if/else 不会按您的预期执行。

我会将你的 reducer 改写成如下所示：

export default function reducer(state = initialState, action) {
    switch(action.type) {
        case ADD_TYPE:
            let idAlreadyExists = state.chosenIds.indexOf(action.chosenId) > -1;
            // make a copy of the existing array
            let chosenIds = state.chosenIds.slice();

            if(idAlreadyExists) {
                chosenIds = chosenIds.filter(id => id != action.chosenId);                
            }     
            else {
                // modify the COPY, not the original
                chosenIds.push(action.chosenId);            
            }      

            return {
                // "spread" the original state object
                ...state,
                // but replace the "chosenIds" field
                chosenIds
            };
        default:
            return state;
    }    
}

【讨论】：

啊当然……我完全忘记了。我不明白为什么你不能直接更新状态？可能只是一个 redux 规则角色
因为对象和数组在 JavaScript 中是通过引用传递的。当你改变你的状态时，你改变了先前的状态并使先前的状态与新的状态相同。因此 react-redux 不能再检测到新旧之间的变化，所以它不会更新。
除此之外，Redux 至少有两个地方进行浅层相等检查：在 reduce 调用结束时查看状态树的顶部，以及在 React-Redux 中比较返回值用于 mapStateToProps 以查看它们是否已更改。在这两个地方，如果旧值与新值的内容没有改变，它假定没有更深层次的改变，并且它实际上不需要做任何更多的事情（即通知订阅者或重新渲染包装的组件）。

【解决方案2】：

另一种具有独立功能的方法：

export default function reducer(state = initialState, action) {
    switch(action.type) {
        case ADD_TYPE:
             function upsert(array, item) {
    // (1)
    // make a copy of the existing array
    let comments = array.slice();
    const i = comments.findIndex(_item => _item._id === item._id);
    if (i > -1) {
      comments[i] = item;

      return comments;
    }
    // (2)
    else {
      // make a copy of the existing array
      let comments = array.slice();
      comments.push(item);

      return comments;
    }
  }

            return {
     ...state,
    comments: upsert(state.comments, action.payload),
            };
        default:
            return state;
    }    
}

【讨论】：