在redux reducer中更改状态的内部键

时间:2017-11-10 10:19:18

标签: javascript reactjs redux reducers

我有以下减速机:

   const ListingReducer = (state={
    fetched:false
},action) => {
    if ( action.payload )
    {
        console.log("action.token",action.token);
        console.log("action.payload.profiles",action.payload.profiles);
    }
    switch(action.type)
    {
        case 'SET_LISTING_DATA':
            state = {
                ...state,
                [action.token] : action.payload,
                fetched : true
            }
            break;
        case 'APPEND_LISTING_DATA':
            // console.log("Previous state was: "state[action.token]);
            state[action.token]
             = {
                ...state[action.token],
                profiles : [...state[action.token].profiles,...action.payload.profiles],
                fetched : true
            }
            // console.log("Next state is: "+state[action.token]);

            break;      
    }
    return state;
}

行动:

  1. SET_LISTING_DATA:它将数据设置为键action.token,其中包含一个名为profiles的键。
  2. APPEND_LISTING_DATA:它将数据附加到状态的profile密钥。
  3. 我可以在配置文件密钥中看到添加的配置文件,但它不会更新视图。

    个人资料位于:

    state[action.token] ={name:y,data:xy,profiles:[id:x,{},{}],...}
    

1 个答案:

答案 0 :(得分:2)

您似乎需要更改state[action.token],但也要保留以前的状态数据,否则您将始终覆盖您的状态。

直接改变/改变状态道具并不是一个好习惯。

case 'APPEND_LISTING_DATA':
  return {
    ...state,
    [action.token]: {
       ...state[action.token],
       profiles: [
         ...state[action.token].profiles,
         ...action.payload.profiles,
       ],
       fetched: true,
    }
  }