在終極版

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

我寧願保持動作簡單，將所有的邏輯進入減速。沒有必要將路由對象傳遞給每個動作。

下面是簡單的例子

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

行動

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

也看看Immutable.js這確實有助於在這種情況下。

Answer 2

您應該在您的操作中傳遞路線ID。您可以使用某種不變性幫助程序更新減速器中的狀態，或者您可以更手動地執行此操作。例如，使用陣營update附加：

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