title: How can it possible to share different state on different multiple Components in React-Redux
body: <p>I have  <code>Menu</code> and <code>MenuItem</code> react components.</p>
  
  <p>They works like this.</p>
  
  <pre><code>        &lt;Menu openOnClick&gt;
            &lt;MenuItem target="/" text="Item 1" active /&gt;
            &lt;MenuItem target="#" text="Item 2" parent&gt;
              &lt;MenuItem target="/" text="Item 3" /&gt;
              &lt;MenuItem target="/" text="Item 4" /&gt;
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
  
          &lt;Menu&gt;
            &lt;MenuItem target="/" text="Item 1" active /&gt;
            &lt;MenuItem target="#" text="Item 2" parent&gt;
              &lt;MenuItem target="/" text="Item 3" /&gt;
              &lt;MenuItem target="/" text="Item 4" /&gt;
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
  </code></pre>
  
  <p>Normally  <code>MenuItem</code> opens as dowpdown when mouse over but I want to provide also click mode for dropdown.</p>
  
  <p><a href="https://drive.google.com/file/d/1n1GiVxx58cw1KCMb477v1dzMdqW6MiLt/view" rel="nofollow noreferrer">clickMode illustrate</a></p>
  
  <p>So <code>MenuItem</code> has <code>clickMode</code> state.I want to this if <code>Menu</code> (parent component) has <code>openOnClick</code> prop true (given by user) then <code>MenuItem</code> <code>clickMode</code> state should be true.</p>
  
  <p>I am achiving this in MenuItem component with redux.</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
      console.log(state.menuReducer.clickMode)
      return {
          clickMode:state.menuReducer.clickMode
      }
  }
  </code></pre>
  
  <p>But if there are multiple <code>Menu</code> component it doesn't work.Because <code>redux</code> store change every dispatch event.</p>
  
  <p>Here is redux state logs.</p>
  
  <p><a href="https://i.stack.imgur.com/pAlyC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pAlyC.png" alt="state logs"></a></p>
  
  <p>Here is <code>Menu</code> reducer.</p>
  
  <pre><code>export const menuReducer = (state = [], action) =&gt; {
      switch (action.type) {
          case menuConstants.CLICK_MODE:
              return {
                  type: menuConstants.CLICK_MODE,
                  clickMode: action.clickMode
              }
          default:
             return state;
      }
  }
  </code></pre>
  
  <p>How can handle this?</p>
  
  <p>Many thanks for help.</p>