Question

我有一个使用React，Redux和Sagas的应用程序。我有一个化简器，其状态是一个对象数组。我希望此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;

...state.slice(1,state.length)在第一次调用UPDATE_FLASHCARD_ARRAY时起作用。但是，它将停止将来的尝试。我发现这是因为状态实际上不是使用我的slice方法删除第一个索引，而是将第一个索引的值设置为等于null。

以下是Redux统计数据的一个字符串，以帮助说明这一点。

在调用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"}}

slice方法正在清除返回与原始状态不同的状态。有人可以指出我在这里做错了吗？我要做的就是每次调度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

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

2 个答案: