title: How to add side-effects when using "useReducer"?
body: <p>I'd like to know what options do I have if I need to add some side-effects when using the <strong>useReducer</strong> hook.</p>
  
  <p>For example, there is a TODO-app:</p>
  
  <pre><code>const initialState = {items: []};
  
  const reducer = (state, action) =&gt; {
    switch (action.type) {
      case 'ADD':
        return {
          ...state,
          items: [...state.items, action.newItem]
        };
  
      default:
        throw new Error();
    }
  };
  
  const App = () =&gt; {
    const [state, dispatch] = useReducer(reducer, initialState);
  
    return (
      &lt;button onClick={() =&gt; dispatch({ type: 'ADD', newItem: 123 })}&gt;
        Add item
      &lt;/button&gt;
    );
  }
  </code></pre>
  
  <p><strong>I need to save new items to the server.</strong> The question is: <strong>Where I should place this code?</strong></p>
  
  <p>(remember, that <strong>reducer</strong> should be pure)</p>