redux and react connect does not work? [duplicate]

Question

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.

 const randomNum=()=>{...}
    const ReduxPropsTest =(props)=>(

        <div>
            <button onClick={()=>console.log('but this component does not have the props',props.array)}>test</button>
    </div>
)

const mapStateToProps=state=>{
    {array:state.reducer}
}
connect(mapStateToProps)(ReduxPropsTest)

//actions
const addItem=(array=[])=>(
    {
        type:'ADD_ITEM',
        array,
    }
)

//reducer
const reducer=(state=[],action)=>{
    switch(action.type){
        case 'ADD_ITEM':
        return [
            ...state,
            action.array
        ]

        default:
        return state;
    }
}

//store
const store=createStore(reducer) 

//create test state
store.subscribe(()=>{
    const state=store.getState();
    console.log('I dispatched successfully: ',state)
})
const Jsx=()=>(
    <Provider store={store}>
        <ReduxPropsTest/>
    </Provider>
)
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))

ReactDom.render(<Jsx/>,document.getElementById('app'))

this is the picture of my problem

I tried to correct my code based on some suggestions and I none are working so far

const randomNum=()=>{...}

const ReduxPropsTest =(props)=>(

    <div>
        <button onClick={()=>console.log('but this component does not have the props',props.array)}>test</button>
    </div>
)

const mapStateToProps=state=>({
    array:state.reducer
})
const Connected = connect(mapStateToProps)(ReduxPropsTest)

const addItem=(array=[])=>(
    {
        type:'ADD_ITEM',
        array,
    }
)

const reducer=(state=[],action)=>{
    switch(action.type){
        case 'ADD_ITEM':
        return [
            ...state,
            action.array
        ]

        default:
        return state;
    }
}

const store=createStore(reducer) 
store.subscribe(()=>{
    const state=store.getState();
    console.log('I dispatched successfully: ',state)
})
const Jsx=()=>(
    <Provider store={store}>
        <Connected/>
    </Provider>
)
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))
store.dispatch(addItem({array:randomNum()}))

ReactDom.render(<Jsx/>,document.getElementById('app'))

this is the picture of error

Answer 1

connect is returning a new component which this the one you need to use.
this line:

connect(mapStateToProps)(ReduxPropsTest)

Will not do anything, as you are not using the new component returned from connect.

const Connected = connect(mapStateToProps)(ReduxPropsTest);

Now pass the new component:

const Jsx=()=>(
    <Provider store={store}>
        <Connected/>
    </Provider>
)

another thing, you are not returning an object inside mapstateToProps:

const mapStateToProps=state=>({
    array:state.reducer
})

Edit
Another issue here, is that you passing to the state an Array. not an object with the key reducer like you expect inside mapstateToProps.

You can use the combineReducers method of redux to create a single reducer (root reducer) that will expose an object of key value pairs:

const comboReducers = combineReducers({
  reducer
});

const store = createStore(comboReducers)

Then you will have a key of reducer inside your mapStateToProps that you can play with.

Working example:

const { createStore, combineReducers  } = Redux;
const { Provider, connect } = ReactRedux;


const randomNum = () => { return Math.random() };

const ReduxPropsTest = (props) => (

  <div>
    <button onClick={() => console.log('but this component does have the props', props.array)}>test</button>
  </div>
)

const mapStateToProps = state => ({
 array: state.reducer
})
const Connected = connect(mapStateToProps)(ReduxPropsTest)

const addItem = (array = []) => (
  {
    type: 'ADD_ITEM',
    array,
  }
)

const reducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [
        ...state,
        action.array
      ]

    default:
      return state;
  }
}

const comboReducers = combineReducers({
  reducer
});

const store = createStore(comboReducers)
store.subscribe(() => {
  const state = store.getState();
  console.log('I dispatched successfully: ', state)
})
const Jsx = () => (
  <Provider store={store}>
    <Connected />
  </Provider>
)
store.dispatch(addItem({ array: randomNum() }))
store.dispatch(addItem({ array: randomNum() }))
store.dispatch(addItem({ array: randomNum() }))
store.dispatch(addItem({ array: randomNum() }))

ReactDOM.render(<Jsx />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>

<div id="app"></div>