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

【问题标题】：Need to run .slice on React Redux Reducer state需要在 React Redux Reducer 状态下运行 .slice
【发布时间】：2019-04-24 07:04:21
【问题描述】：

我有一个使用 React、Redux 和 Sagas 的应用程序。我有一个减速器，它的状态是一个对象数组。我希望这个减速器通过删除数组的第一项来处理某个动作。我知道状态需要是不可变的，因此我不能简单地调用 .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 时起作用。然而，它停止了未来的尝试。我发现这是因为 state 实际上并没有使用我的 slice 方法删除第一个索引，而是将第一个索引的值设置为 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 时从状态数组中删除第一个对象。

【问题讨论】：

正如@Dominic 所说，你只需要正确地改变你的数组。当你想要一个数组时，你正在扩散到一个对象中。这个问题与 react、redux 或 redux-sagas 无关。

标签： reactjs redux react-redux

【解决方案1】：

.slice 已经返回了一个新数组，您不需要传播它，您还将它传播到一个对象中，这就是您看到 {"0":... 的原因：

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

【讨论】：

【解决方案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

【讨论】：