reducer更新状态后对象顺序更改

Question

目前，我正在学习Redux，玩着不同的东西。 因此，我制作了一个简单的TODO应用程序，可以编辑每个TODO项目。

但是由于某种原因，UPDATE_TODO reducer将更新的TODO项放在列表的和中。 因此，该项目已成功更新，但跳到TODO列表的末尾，而不是停留在原始位置。

原始TODO项目定位：

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

更新项目1后的定位：

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

在我的化简器中，我用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将返回除已更新项目以外的所有待办事项，然后在所有项目之后放入action.payload （已更新项目）。

代替使用map并放置条件，当todo.id == action.payload.id为true然后返回更新后的项，否则返回现有项。

像这样：

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