title: Redux vs custom hook
body: <p>I learned react and Redux at the same time and went "all in" on Redux; basically all state is stored in <a href="https://redux.js.org/" rel="noreferrer">Redux</a>. And I followed the standard <code>allIds</code>, <code>byId</code> state shape pattern <a href="https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape" rel="noreferrer">as detailed here</a>. </p>
  
  <p>My app is very data-centric, it talks to an API, and does alot of CRUD type actions - fetchAll, fetchById, add, update, delete.  </p>
  
  <p>The API communication is segregated into a "service layer" module that is its own npm package. All calls to this service layer are in the Redux actions, using <a href="https://github.com/reduxjs/redux-thunk" rel="noreferrer">redux-thunk</a>.</p>
  
  <p>I've realized there is no need to put most everything in Redux, the data is really needed on a specific component, for example. And I would love to simplify this architecture.</p>
  
  <p>So I began to refactor into a custom hook instead.  It seemed since my state shape was more of an object rather than scalar, I should use <code>useReducer</code> rather than <code>useState</code>...</p>
  
  <pre><code>// reducer
  // ------------------------- 
  const initialState = {
    adding: false,
    updating: false,
    deleting: false,
    error: null,
    items: null
  };
  const reducer = (state, action) =&gt; {
  // implementation omitted for brevity. . .
  }
  const useItemsApi = () =&gt; {
    const [state, dispatch] = useReducer(reducer, initialState);
  
    // wrapped in useCallback because called in component's useEffect
    const fetchItems = useCallback(async (options) =&gt; {
      try {
        const resp = apiService.fetchItems(options);
      } catch (err) {
        if(err.status === 401) 
           // send to login screen
        else
           dispatch({type: 'error', payload: err});
      }
    }, [options]);
  
    // addItem, updateItem, deleteItem, etc...
  
    const actions = {fetchItems, updateItem, addItem, deleteItem};
    return [state, actions];
  };
  
  // component
  // ------------------------- 
  const component = (props) =&gt; {
    const [state, actions] = useItemsApi();
    const {fetchItems, updateItem, addItem, deleteItem} = actions;
    useEffect(() =&gt; {
       fetchItems()
    }, fetchItems);
  
    // omitted for brevity...
  }
  </code></pre>
  
  <p>When I got to setting the state in the reducer for the update action, I realized it would be easier if I used "allIds" and "byId" pattern.  </p>
  
  <p>And at this point I thought - how is this any different than using Redux? </p>
  
  <p>It is going to end up looking like almost the exact same code, and I'm losing some power of selectors, but removing the complexity of redux-thunks. And my current redux actions include specific use case actions (special save for item type X, for ex.) so I'd need to find a place for those.</p>
  
  <p>My question is - is there any reason to refactor this to a hook using local state? </p>