reducer 更新状态后对象顺序发生变化

Question

目前我正在学习 Redux，尝试各种不同的东西。所以我制作了一个简单的 TODO 应用程序，可以编辑每个 TODO 项目。

但出于某种原因 UPDATE_TODO reducer 将更新的 TODO 项目放在列表的和处。所以该项目已成功更新，但它跳到了 TODO 列表的末尾，而不是停留在原来的位置。

原来的TODO项目定位：

项目 1 <-- 正在更新
项目 2
项目 3

item 1更新后的定位：

项目 2
项目 3
项目 1 <-- 已更新

在我的 reducer 中，我使用 filter() 过滤除更新的 TODO 之外的所有 TODO，然后为更新的 TODO 项设置一个新状态。

需要有关如何正确更新 TODO 项状态以使其保持在原始位置的建议？

减速机

import { UPDATE_TODO } from '../constants';

const initialState = {
  all: [] // array of all TODO's
}

export default function(state = initialState, action) {
  switch (action.type) {
    ...
    case UPDATE_TODO:
      return {
        ...state,
        all: [
          ...state.all.filter(todo => todo.id !== action.payload.id),
          action.payload
        ]
      };
    default:
      return state;
  }
}

Answer 1

因为您将更新的项目 action.payload 放在最后：

all: [
    ...state.all.filter(todo => todo.id !== action.payload.id),
    action.payload
]

此处 filter 将 return 除更新后的所有待办事项，然后在所有项目之后放置 action.payload（更新后的）。

而不是使用 map 并放置条件，当 todo.id == action.payload.id 将是 true 时 return 更新的项目，否则 return 现有项目.

像这样：

case UPDATE_TODO:
    return {
        ...state,
        all: [
            ...state.all.map(todo => {
                if(todo.id == action.payload.id)
                    return action.payload;
                return todo;
            })              
        ]
};

reducer 更新状态后对象顺序发生变化

Object order changes after reducer updates the state

reactjs

redux

reducers