更新 redux 状态数组中的对象不重新渲染反应组件

Question

我正在尝试更新 redux 状态下 chefs 数组中的单个厨师。数组示例如下：

  [
    { _id: 1, name: 'first chef' },
    { _id: 2, name: 'second chef' },
    { _id: 2, name: 'third chef' }
  ]

我调用了 API 然后 returns 我更新了厨师对象。我基本上找到了当前状态下的相关厨师对象，但是，当我不可变地更新它时，我的反应组件不会重新渲染。

这是在 redux reducer 中更新对象数组中的单个对象的正确方法吗？

import _ from 'lodash';
import { ADMIN_LIST_CHEFS, ADMIN_GET_CHEF, UPDATE_CHEF_LIST } from '../actions/types';

const INITIAL_STATE = { chefs: [], chef: null };
let CHEFS = [];
let INDEX = null;

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case UPDATE_CHEF_LIST:
      CHEFS = state.chefs;
      INDEX = _.findIndex(CHEFS, (chef => chef._id === action.id));
      state.chefs.splice(INDEX, 1, action.payload);
      return { ...state };
    default:
      break;
  }
  return state;
}

Answer 1

您应该 return 从您的 reducer 新建对象，您可以使用 map 函数改进您的代码

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case UPDATE_CHEF_LIST:
      return {
        ...state,
        chefs: state.chefs.map( chef => chef._id === action.id? action.payload: chef)
      }
    default:
      break;
  }
  return state;
}

更新 redux 状态数组中的对象不重新渲染反应组件

updating object within redux state array not re-rendering react component

immutability

reducers

redux

react-redux