title: Link 2 components via Redux/ React
body: <p>I have 2 unrelated components, that should share the same state for some reason. The first component contains a button that when clicked should change the state of the other component.</p>
  <p>I already implemented the below using redux, but still I am getting an error.</p>
  <p>Error I am getting:</p>
  <blockquote>
  <p>Could not find &quot;store&quot; in either the context or props of &quot;Connect(Compoenent1)&quot;. Either wrap the root component in a , or explicitly pass &quot;store&quot; as a prop to &quot;Connect(Compoenent1)&quot;.</p>
  </blockquote>
  <p>I already implemented the below:
  Component1:</p>
  <pre><code>function mapDispatchToProps (dispatch) {
      return bindActionCreators({
        refresh: (value) =&gt; ({
          type: 'UPLOAD_DONE',
          payload: {
            uploaded: value,
          },
        }),
      }, dispatch)
    }
    function mapStateToProps (state) {
      return {
        uploaded: state.uploaded,
      }
    }
    
  class Component1 extends Component {
  state = {
      uploaded: false,
  }
   
    render () {
      return (
       &lt;button onclick = () =&gt; this.props.refresh(true) /&gt;
      )
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Component1)
  </code></pre>
  <p>Component 2:</p>
  <pre><code>function mapDispatchToProps (dispatch) {
    return bindActionCreators({
      refresh: (value) =&gt; ({
        type: 'UPLOAD_DONE',
        payload: {
          uploaded: value,
        },
      }),
    }, dispatch)
  }
  function mapStateToProps (state) {
    return {
      uploaded: state.uploaded,
    }
  }
  
  const Component2= props =&gt; {
    const [fetchVideos, setFetchVideos] = useState([])
   
  
    useEffect(() =&gt; {
      setFetchVideos(true)
    }, [props])
  
  
    const toggleDir = () =&gt; {
      const dirVal = sortDir === 'asc' ? 'desc' : 'asc'
      setSortDir(dirVal)
    }
  
    return (
    &lt;div&gt; {fetchVideos} &lt;/div&gt;
    )
  }
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Component2)
  </code></pre>
  <p>Reducer:</p>
  <pre><code>function upload (state, action) {
      return {
        ...action.payload.uploaded,
      }
    }
  
  export default makeReducer({
    UPLOAD_DONE : (state, action) =&gt; upload(state, {
        ...action,
        payload: {
            uploaded: action.payload.uploaded,
        },
    }),
  }, null)
  </code></pre>
  <p>Connected component</p>
  <pre><code>const App = () =&gt; (
    &lt;div&gt;
      &lt;Component2/&gt;
      &lt;Component1/&gt;
    &lt;/div&gt;
  )
  
  export default App
  </code></pre>
  <p>Index.js</p>
  <pre><code>export default function () {
    const defaultState = reducer()
  
    const initialState = {
      ...defaultState,
  
      uploaded: false,
    }
  
    const store = createStore(reducer, initialState)
    setAppElement('#root')
    return {
      element: (
        &lt;Provider store={store}&gt;
          &lt;div&gt;
            {devTools}
            &lt;App&gt;&lt;/App&gt;
          &lt;/div&gt;
        &lt;/Provider&gt;
      ),
    }
  }
  </code></pre>