title: Using useReducer to dispatch action from one child component and update state in another child component
body: <p><strong>Here is a CodeSandbox that has the example code below, and the linter highlights some of the issues: <a href="https://codesandbox.io/s/react-repl-bw2h1" rel="nofollow noreferrer">https://codesandbox.io/s/react-repl-bw2h1</a></strong></p>
  
  <p>Below is a basic example of what I'm trying to do. In a container component, I have a context <code>AppContext</code> that is providing state to child components, <code>&lt;ChildConsumer /&gt;</code> and <code>&lt;ChildDispatcher /&gt;</code>.</p>
  
  <p>The <code>&lt;ChildConsumer /&gt;</code> component is receiving this state using <code>useContext</code>, and this seems to be working as expected.</p>
  
  <p>Inside <code>&lt;ChildDispatcher /&gt;</code>, I'm trying to dispatch an action when a button is clicked. To do this, I've created a reducer <code>reducer</code> that handles an action. I've also set up useReducer here that takes in <code>reducer</code> and the initial <code>store</code> state.</p>
  
  <p>When I click the button, nothing happens. What I'm expecting to happen is that the <code>dispatch</code> receives both the <code>state</code> pulled off of <code>useReducer</code> as well as an <code>action</code> object, and passes these to the reducer. The reducer should see that the action of type <code>BUTTON_CLICKED</code> was received, and should return a new state containing the old state as well as an additional <code>'goodbye'</code> item. Then, the child component <code>&lt;ChildConsumer /&gt;</code> should rerender with this new state.</p>
  
  <pre><code>import React, { createContext, useContext, useReducer } from "react";
  import ReactDOM from "react-dom";
  
  const store = [""];
  const AppContext = createContext(store);
  
  const ChildDispatcher = () =&gt; {
    const reducer = (state, action) =&gt; {
      switch (action.type) {
        case "BUTTON_CLICKED":
          return [...state, "goodbye"];
        default:
          return state;
      }
    };
  
    const [state, dispatch] = useReducer(reducer, store);
    const handleClick = () =&gt;
      dispatch(state, {
        type: "BUTTON_CLICKED"
      });
    return &lt;button onClick={handleClick}&gt;press me&lt;/button&gt;;
  };
  
  const ChildConsumer = () =&gt; {
    const [consumer] = useContext(AppContext);
    return &lt;div&gt;{consumer}&lt;/div&gt;;
  };
  
  const App = () =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;Using Context and useReducer&lt;/h1&gt;
        &lt;AppContext.Provider value={["hello"]}&gt;
          &lt;ChildConsumer /&gt;
          &lt;ChildDispatcher /&gt;
        &lt;/AppContext.Provider&gt;
      &lt;/div&gt;
    );
  };
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>