レデューサーが状態を更新した後のオブジェクトの順序が変更される

Question

現在、私はReduxを学んでいます。 だから、TODOの各項目を編集する簡単なTODOアプリを作った。

しかし、何らかの理由で、UPDATE_TODOレデューサーは更新されたTODOアイテムをリストの中に置きます。アイテムは正常に更新されますが、元の位置にとどまるのではなく、TODOのリストの最後にジャンプします。

オリジナルTODO項目位置決め：

• 項目1 <から項目1の更新後
• 項目2
• 項目3

Positioningを更新中：

• 項目2
• 項目3
• 項目1 < - 私はフィルタと更新1（除くすべての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は、すべての後に、更新以外のすべてのTODOアイテムを返します。 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; 
      })    
     ] 
};