title: redux and react connect does not work?
body: <p>I am leaning redux, and I am trying to create a simple test app to see if I can pass props from redux to react component or not but it does not work as I expect. the store it self works fine but it does not pass value to my component can some one please point out the problem with my code? thanks. </p>
  
  <pre><code> const randomNum=()=&gt;{...}
      const ReduxPropsTest =(props)=&gt;(
  
          &lt;div&gt;
              &lt;button onClick={()=&gt;console.log('but this component does not have the props',props.array)}&gt;test&lt;/button&gt;
      &lt;/div&gt;
  )
  
  const mapStateToProps=state=&gt;{
      {array:state.reducer}
  }
  connect(mapStateToProps)(ReduxPropsTest)
  
  //actions
  const addItem=(array=[])=&gt;(
      {
          type:'ADD_ITEM',
          array,
      }
  )
  
  //reducer
  const reducer=(state=[],action)=&gt;{
      switch(action.type){
          case 'ADD_ITEM':
          return [
              ...state,
              action.array
          ]
  
          default:
          return state;
      }
  }
  
  //store
  const store=createStore(reducer) 
  
  //create test state
  store.subscribe(()=&gt;{
      const state=store.getState();
      console.log('I dispatched successfully: ',state)
  })
  const Jsx=()=&gt;(
      &lt;Provider store={store}&gt;
          &lt;ReduxPropsTest/&gt;
      &lt;/Provider&gt;
  )
  store.dispatch(addItem({array:randomNum()}))
  store.dispatch(addItem({array:randomNum()}))
  store.dispatch(addItem({array:randomNum()}))
  store.dispatch(addItem({array:randomNum()}))
  
  ReactDom.render(&lt;Jsx/&gt;,document.getElementById('app'))
  </code></pre>
  
  <p>this is the picture of my problem
  <a href="https://i.stack.imgur.com/v3tQL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v3tQL.png" alt="enter image description here"></a></p>
  
  <p>I tried to correct my code based on some suggestions and I none are working so far</p>
  
  <pre><code>const randomNum=()=&gt;{...}
  
  const ReduxPropsTest =(props)=&gt;(
  
      &lt;div&gt;
          &lt;button onClick={()=&gt;console.log('but this component does not have the props',props.array)}&gt;test&lt;/button&gt;
      &lt;/div&gt;
  )
  
  const mapStateToProps=state=&gt;({
      array:state.reducer
  })
  const Connected = connect(mapStateToProps)(ReduxPropsTest)
  
  const addItem=(array=[])=&gt;(
      {
          type:'ADD_ITEM',
          array,
      }
  )
  
  const reducer=(state=[],action)=&gt;{
      switch(action.type){
          case 'ADD_ITEM':
          return [
              ...state,
              action.array
          ]
  
          default:
          return state;
      }
  }
  
  const store=createStore(reducer) 
  store.subscribe(()=&gt;{
      const state=store.getState();
      console.log('I dispatched successfully: ',state)
  })
  const Jsx=()=&gt;(
      &lt;Provider store={store}&gt;
          &lt;Connected/&gt;
      &lt;/Provider&gt;
  )
  store.dispatch(addItem({array:randomNum()}))
  store.dispatch(addItem({array:randomNum()}))
  store.dispatch(addItem({array:randomNum()}))
  store.dispatch(addItem({array:randomNum()}))
  
  ReactDom.render(&lt;Jsx/&gt;,document.getElementById('app'))
  </code></pre>
  
  <p>this is the picture of error
  <a href="https://i.stack.imgur.com/R8oW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R8oW8.png" alt="enter image description here"></a></p>