Question

需要在 React Redux Reducer 状态上运行 .slice

2018-11-21

654

reactjs redux react-redux

我有一个使用 React、Redux 和 Sagas 的应用程序。我有一个 Reducer，它的状态是一个对象数组。我希望这个 Reducer 通过删除数组的第一个项来处理某个操作。我理解状态需要是不可变的，因此我不能简单地调用 .shift。

这是我现在想做的事情：

const flashcards = (state = [], action) => {
    switch (action.type) {
      case 'MAKE_FLASHCARD':
      console.log(action.payload)
        return action.payload;
      case 'UPDATE_FLASHCARD_ARRAY':
        return ({
          ...state.slice(1,state.length)
        })
      default:
        return state;
    }
  };


  export default flashcards;

第一次调用 UPDATE_FLASHCARD_ARRAY 时， ...state.slice(1,state.length) 有效。但是它在以后的尝试中停止工作。我发现这是因为 state 实际上并没有使用我的切片方法删除第一个索引，而是将第一个索引的值设置为 null。

下面是 Redux stat 的字符串化，有助于说明这一点。

在调用 UPDATE_FLASHCARD_ARRAY 之前：

[{"id":7,"account_id":1,"native_word":"pig","translation":"gris"},{"id":3,"account_id":1,"native_word":"cow","translation":"ku"},{"id":1,"account_id":1,"native_word":"cheese","translation":"ost"},{"id":2,"account_id":1,"native_word":"milk","translation":"melk"},{"id":8,"account_id":1,"native_word":"spider","translation":"ederkopp"}]

在调用 UPDATE_FLASHCARD_ARRAY 之后：

{"0":{"id":3,"account_id":1,"native_word":"cow","translation":"ku"},"1":{"id":1,"account_id":1,"native_word":"cheese","translation":"ost"},"2":{"id":2,"account_id":1,"native_word":"milk","translation":"melk"},"3":{"id":8,"account_id":1,"native_word":"spider","translation":"ederkopp"}}

切片方法正在清除返回与原始状态不同的状态。有人能指出我在这里做错了什么吗？我想要做的就是每次调度 UPDATE_FLASHCARD_ARRAY 时从状态数组中删除第一个对象。

Answer 1

.slice 已经返回了一个新数组，您不需要将其展开，您还将它展开到一个对象中，这就是为什么您看到 {"0":... :

case 'UPDATE_FLASHCARD_ARRAY':
  return state.slice(1,state.length)

Answer 2

您是否尝试过 return state.slice(1) 而不是 return ({...state.slice(1,state.length)}) ？后者会创建一个对象，该对象具有与 Array 相同的键，但实际上并不像 Array ：

Array.isArray([1, 2, 3]) === true
Array.isArray({...[1, 2, 3]}) === false
({...[1, 2, 3]}).slice(1) -> TypeError