は深くネストされた状態を変更するReduxの

Question

に私の減速は、この

const INITIAL_STATE = { map:[], routes:[], road:null}; 


export default function (state = INITIAL_STATE, action){ 
    switch(action.type){ 
     case TOGGLE_ROUTE_VISIBILITY : return { ...state, routes: action.payload }; 
      break; 
     case SAVE_ROAD_ROUTE : return {...state, routes: action.payload }; 
      break; 
    default: 
     return state; 
    } 
} 

のように見え、自分の行動がこの

export function toggleVisibility(id, routes){ 
    const i = _.findIndex(routes, o => { return o.id = id }); 
    routes[i].visible = !routes[i].visible; 
    return { 
     type: TOGGLE_ROUTE_VISIBILITY, 
     payload: routes 
    } 
} 

のように見えるので、私の状態は

state:{ 
    base: 
     routes : [ 
      {id:1, visible:true}, 
      {id:2, visible:true}, 
     ] 
}} 

主な問題のように見えますルート状態のデータを設定しています。私は私のアプローチが間違っているという気持ちがあり、州のルートを保存し、それを変更して保存できる適切な方法があります。

Answer 1

私は、単純なアクションを維持し、減速にすべてのロジックを移動することを好みます。各アクションにroutesオブジェクトを渡す必要はありません。

export function toggleVisibility(id){ 
    return { 
     type: TOGGLE_ROUTE_VISIBILITY, 
     id: id 
    } 
} 

ここ

は単純な例です

const INITIAL_STATE = {map: [], routes: [], road: null}; 

export default function (state = INITIAL_STATE, action) { 
    switch (action.type) { 
     case TOGGLE_ROUTE_VISIBILITY : 
      return Object.assign(state, { 
       routes: state.routes.map(function (route) { 
        if (route.id === action.id) { 
         route.visible = !route.visible; 
        } 
        return route; 
       }) 
      }); 
      break; 
     case SAVE_ROAD_ROUTE: 
      return Object.assign(state, { 
       routes: [ 
        ...state.routes, 
        { 
         id: action.id, // or just add some ID generator here 
         visible: true 
        } 
       ] 
      }); 
      break; 
     default: 
      return state; 
    } 
} 

アクションも本当にこのシナリオで役立ちますImmutable.jsを見てみましょう。

Answer 2

あなたの行動にはルートIDを渡すだけです。いくつかの種類の不変ヘルパーを使用して、減速機の状態を更新することができます。あるいは手動で行うこともできます。例えば、updateアドオンリアクト使用：

return update(state, { 
    base: { 
    routes: { 
     [action.payload.routeId]: { 
     visible: { 
      $apply: function (visible) { 
      return !visible; 
      } 
     } 
     } 
    } 
    } 
});