Modifying a deep nested state in Redux
<p>My reducer looks like this</p>

<pre><code>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;
    }
}
</code></pre>

<p>and my action looks like this</p>

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

<p>So my state looks like</p>

<pre><code>state:{
    base:
        routes : [
           {id:1, visible:true},
           {id:2, visible:true},
        ]
}} 
</code></pre>

<p>The main problem is setting the data on the routes state. I have a feeling that my approach is incorrect and there's a proper way of saving the routes in the state and still be able to modify and save it.</p>