javascript - Redux: アクションに応じて Reducer の初期状態のさまざまな部分を変更する

Question

私は次のリデューサーを持っています:

const initialState = {}

const dishReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'LOAD_DISHES': 
        return (action.dishes)
    
      case 'LOAD_DISHES_ERROR': 
        console.log("load dishes error")
        return state
      case 'LOAD_DISHES_SUCCESS': 
        console.log("load dishes success")
        return state
      default:
        return state;
    }
  };

  export default dishReducer;

そして、次のアクション:

import {database} from '../../config/fbConfig'

export const startLoadingDishes = (dishes) => {
    return (dispatch) =>{
        return database.ref('products-dishes').once('value').then((snapshot) => {
            let dishes = {}
            snapshot.forEach((childSnapshot) => {
                let parentkey = childSnapshot.key
                let dishArray = [];
                childSnapshot.forEach((dish) =>{
                        dishArray.push(dish.val())
                    });
                dishes[childSnapshot.key] = dishArray;
            })
    
            dispatch(loadDishes(dishes))
        }).then(() => {
            dispatch({ type: 'LOAD_DISHES_SUCCESS' });
          }).catch(err => {
            dispatch({ type: 'LOAD_DISHES_ERROR' }, err);
          });
    }

}

export const loadDishes = (dishes) => { 
    return {
        type: 'LOAD_DISHES',
        dishes               
    }
}

「startLoadingDishes」アクションは、特定のコンポーネントの componentDidLoad() 内で呼び出されます。ただし、次のように、追加情報が含まれるように、dishReducer の初期状態を変更したいと考えています。

const initialState = {
    value : {},
    loaded: false,
    loading: false,
    error: false
}

そのため、[LOAD_DISHES の場合] レデューサーによって返される 'action.dishes' は、状態全体ではなく、状態の '値' 部分内に配置する必要があります。また、皿がすでに以前にロードされている場合は、状態の「ロード済み」部分を true に設定する必要があります。これはかなり単純なことだと理解していますが、私は React+Redux を初めて使用するので、(状態の不変性を維持しながら) Action/Reducer コードを適切に変更する方法がわかりません。どんな助けでも大歓迎です。