title: How to handle adding new item or delete existing one in React using Redux
body: <p>I have a list of products called work items stored on my Redux store and I want to add an action that adds new work item or remove existing one when user picks up a a work item from the ui.</p>
  
  <p>What I have so far is this workItemReducer:</p>
  
  <pre><code>import {
      FETCH_WORKITEMS_BEGIN,
      FETCH_WORKITEMS_SUCCESS,
      FETCH_WORKITEMS_FAILURE,
      SELECTED_WORKITEM
  } from '../actions/workItemAction';
  
  const initialState = {
      workItems: [{"name":'work 1'}, {"name":'work 2'}, {"name":'work 3'}],
      workItemsSelected: {},
      loading: false,
      error: null
  };
  
  export default function workItemReducer(state = initialState, action) {
      switch(action.type) {
          case FETCH_WORKITEMS_BEGIN:
              return {
                  ...state,
                  loading: true,
                  error: null
              };
  
          case FETCH_WORKITEMS_SUCCESS:
              return {
                  ...state,
                  loading: false,
                  workItems: action.payload.workItems
              };
  
          case FETCH_WORKITEMS_FAILURE:
              return {
                  ...state,
                  loading: false,
                  error: action.payload.error,
                  workItems: []
              };
  
          case SELECTED_WORKITEM:
              return {
                  ...state,
                  workItemsSelected: action.payload.workItem
              };
  
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>and the actions looks as below:</p>
  
  <pre><code>export const FETCH_WORKITEMS_BEGIN   = 'FETCH_WORKITEMS_BEGIN';
  export const FETCH_WORKITEMS_SUCCESS = 'FETCH_WORKITEMS_SUCCESS';
  export const FETCH_WORKITEMS_FAILURE = 'FETCH_WORKITEMS_FAILURE';
  export const SELECTED_WORKITEM = 'SELECTED_WORKITEM';
  
  export const fetchWorkItemsBegin = () =&gt; ({
      type: FETCH_WORKITEMS_BEGIN
  });
  
  export const fetchWorkItemsSuccess = workItems =&gt; ({
      type: FETCH_WORKITEMS_SUCCESS,
      payload: { workItems }
  });
  
  export const fetchWorkItemsFailure = error =&gt; ({
      type: FETCH_WORKITEMS_FAILURE,
      payload: { error }
  });
  
  export const selectedWorkItem = workItem =&gt; ({
      type: SELECTED_WORKITEM,
      payload: { workItem }
  });
  </code></pre>
  
  <p>I have a container component that disptach or call these actions which I am a bit confused where the logic of adding a new one or removing existing one happens, either on the container/smart component or directly in the reducer.</p>
  
  <p>Container component has this method:</p>
  
  <pre><code> onWorkItemSelect = (workItem) =&gt; {
       this.props.dispatch(selectedWorkItem(workItem));
   };
  </code></pre>
  
  <p>Anyone can help on writing the logic of adding new or remove existing one and where that code should live?</p>