title: How can I get all sibling components to correctly re-render when dispatching a redux action from one sibling component?
body: <p>This is basically what I am trying to accomplish using react and redux. I have a parent component which renders 4 child components. Initially the child components all display the same number, which they get from the redux store using the <strong>useSelector</strong> hook. Each child component can trigger a click event which will dispatch an action and change the number in the store. When you trigger the event from one child component I would like to see all 4 components render and display the new number in the store. I have, currently the following code ...</p>
  <p><strong>Reducer function, to change the number (which is initialized to 1)</strong></p>
  <pre><code>const initialState = {
      number: 1
  }
  export default function numberReducer(state = initialState, action){
     
      if(action.type === CHANGE_NUMBER){
          return (
              
              {   
                  number: action.payload.number
              }
          );
          
      }
      
      return state;
  }
  </code></pre>
  <p><strong>The redux store</strong></p>
  <pre><code>const store = createStore(numberReducer);
  
  export default store;
  </code></pre>
  <p><strong>The parent component</strong></p>
  <pre><code>const ParentComponent = () =&gt; {
  
      return ( 
      &lt;div&gt;
          &lt;div&gt;&lt;ChildComponent title=&quot;child1&quot;/&gt;&lt;/div&gt;
          &lt;div&gt;&lt;ChildComponent title=&quot;child2&quot;/&gt;&lt;/div&gt;
          &lt;div&gt;&lt;ChildComponent title=&quot;child3&quot;/&gt;&lt;/div&gt;
          &lt;div&gt;&lt;ChildComponent title=&quot;child4&quot;/&gt;&lt;/div&gt;
      &lt;/div&gt; 
      );
  }
   
  export default ParentComponent;
  </code></pre>
  <p><strong>A given child component</strong></p>
  <pre><code>const ChildComponent = ({title}) =&gt; {
  
      console.log(&quot;Rendering &quot; + title);
      
      const initialNumber = useSelector(state =&gt; state.number);
  
      const dispatch = useDispatch();
      const [newNumber, setNewNumber] = useState(initialNumber);
  
      const handleClick = () =&gt; {
          const action = {type: CHANGE_NUMBER, payload: {number: newNumber}};
          dispatch(action);
      }
  
      const handleChange = (e) =&gt; {setNewNumber(e.target.value)};
      
      return ( 
          &lt;div&gt;
              &lt;h2&gt;{title}&lt;/h2&gt; 
              &lt;br /&gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Enter number&quot; value={newNumber} onChange={handleChange}/&gt;
              &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; onClick={handleClick}/&gt;
          &lt;/div&gt;
       );
  }
   
  export default ChildComponent;
  </code></pre>
  <p>In the child component I have used the <strong>useState</strong> hook and the <strong>handleChange</strong> function to create a two way binding between newNumber and the value in the input field. Since the initialState in the store is 1, all child components start off with 1 in their respective input fields. When I then go to, for instance, child component 2, change its input from 1 to 12 and click its button, I would like all child components to render and display 12.</p>
  <p>Since each child component has a different title prop, I can verify, using <code>console.log(&quot;Render &quot; + title)</code>, that changing the input and clicking the corresponding button in one component, re-renders all components. However only the component that triggered the click event displays the new value of the number (from the store). The rest retain their initial value of 1.</p>
  <p>What happens is that the store gets correctly updated. Continuing with the same example, in child component 1 (which wasen't clicked), <strong>initialNumber</strong> is correctly set as 12. But when initializing the component's <strong>newNumber</strong> variable, from the <strong>useState</strong> hook, its gets set to 1. Not to the new number, in the redux store. I can summarize it like this.</p>
  <p><strong>Intially:</strong></p>
  <ul>
  <li>Child component 1 - initialNumber: 1, newNumber: 1</li>
  <li>Child component 2 - initialNumber: 1, newNumber: 1</li>
  <li>Child component 3 - initialNumber: 1, newNumber: 1</li>
  <li>Child component 4 - initialNumber: 1, newNumber: 1</li>
  </ul>
  <p><strong>I go to child component 2, change its value to 12, click its button and I get</strong></p>
  <ul>
  <li>Child component 1 - initialNumber: 12, newNumber: 1</li>
  <li>Child component 2 - initialNumber: 12, newNumber: 12</li>
  <li>Child component 3 - initialNumber: 12, newNumber: 1</li>
  <li>Child component 4 - initialNumber: 12, newNumber: 1</li>
  </ul>
  <p><strong>But I am expecting</strong></p>
  <ul>
  <li>Child component 1 - initialNumber: 12, newNumber: 12</li>
  <li>Child component 2 - initialNumber: 12, newNumber: 12</li>
  <li>Child component 3 - initialNumber: 12, newNumber: 12</li>
  <li>Child component 4 - initialNumber: 12, newNumber: 12</li>
  </ul>
  <p>So the child component state, newNumber, doesn't get correctly set to the redux store number. I have attempted to directly call the setNewNumber function, and force newNumber to be set to initialNumber, but this just re-renders the component again and causes an infinite loop.</p>
  <p>Any ideas on how I can display the updated redux store number in every child component. Thanks in advance.</p>