更新未在反应前端显示的已更改项目的状态

Question

我正在研究我的减速器，我正在努力让 UPDATE 工作。

当某个对象 ID 在状态发生变化时，我只是想更新我的反应前端上的列表。我怎样才能让它在这个reducer的前端改变具有特定ID的项目。

我在 UPDATE_ANIMALS 中尝试过，但没有成功

case 'UPDATE_ANIMALS':     
    return [      
        ...state, item => item.id === action.payload.id ? action.payload : item

];

下面是我的整个减速器。

export const ANIMALSReducer = (state = [], action) => {
  switch (action.type) {
    case 'FETCH_ANIMALS':
      return action.payload;
    case 'ADD_ANIMALS': 
      return [...state, action.payload]; 
    case 'DELETE_ANIMALS': 
      return [      
      ...state.filter(item => item.id !== action.payload)
     ]; 
     case 'UPDATE_ANIMALS':     
      return [      
        NOT SURE WHAT TO PUT HERE
       ];
    default:
      return state;
  }
};

Answer 1

您可以使用 map 函数非常轻松地实现这一点，基本上您正在生成一个新数组，并且给定有效负载的匹配项将使用有效负载而不是原始更新：

case 'UPDATE_ANIMALS':  
    return state.map(item => item.id === action.payload.id ? action.payload : item);