redux状態アレイ内のオブジェクトを更新する反応コンポーネントを再レンダリングしない

Question

私の還元状態でシェフアレイ内の1人のシェフを更新しようとしています。配列の例は、次のとおりです。

私はAPIを呼び出して、更新されたシェフオブジェクトを返します。私は基本的に私の現在の状態で、関連するシェフオブジェクトを見つけるが、私はそれを不変に更新すると、私の反応コンポーネントは再レンダリングされません。

これは、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

あなたの減速から新しいオブジェクトを返す必要がありますし、マップ機能を使用してコードを向上させることができます

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; 
}