How to Update specific slice of redux state in React
<p>I seem to have hit a snag when updating state using redux and react-redux. When I update an individual slice of state, all of the others get removed. I know the answer to this will be simple but I can't figure it out and haven't found anything else online.</p>

<p>So to clarify, here's my reducer:</p>

<pre><code>const initialState = {
        selectedLevel: null,
        selectedVenue: null,
        selectedUnitNumber: null,
        selectedUnitName: null,
        selectedYear: null
}

export default (state = initialState, action) =&gt; {
    console.log('reducer: ', action);
    switch (action.type){
        case 'CHOOSE_LEVEL':
            return action.payload;
        case 'CHOOSE_VENUE':
            return action.payload;
        case 'CHOOSE_UNIT':
            return action.payload;
        case 'SHOW_COURSES':
            return action.payload;
    }

    return state;
}
</code></pre>

<p>And my combine reducer:</p>

<pre><code>export default combineReducers({
    workshopSelection: WorkshopSelectReducer
});
</code></pre>

<p>So my initial state looks like this:</p>

<pre><code>workshopSelection: {
    selectedLevel: null,
    selectedVenue: null,
    selectedUnitNumber: null,
    selectedUnitName: null,
    selectedYear: null
}
</code></pre>

<p>But when I use one of my action creators, for example:</p>

<pre><code>export function chooseVenue(venue){
    return {
        type: 'CHOOSE_VENUE',
        payload: {
            selectedVenue: venue
        }
    }
}
</code></pre>

<p>I end up with state looking like this:</p>

<pre><code>workshopSelection: {
    selectedVenue: 'London',
}
</code></pre>

<p>All of the rest of the state within this object that wasn't affected by this action creator has been completely wiped out. Instead, I just want all other entries to stay as they are with their original values - <code>null</code> in this example, or whatever other value has been assigned to them.</p>

<p>Hope that all makes sense.</p>

<p>Cheers!</p>