更新Redux存储时，React不重新渲染

Question

I know it's me... Because I suck :)

But I believe I am doing everything correct but when I dispatch my action and the state changes my view does not re-render.

I believe this is the simple change that might be needed but the

render()

render(){
    ....
    <div className={data.participants}>
        +{store.getState().currentSex.participants}
    </div>
    ....
}

Function that calls the action

onSetParticipants = () => {
    console.info(store.getState()); //participants = 1
    store.dispatch (currentSex.setParticipants(3));
    console.info(store.getState()); //participants = 3
}

reducer currentSex.js

import { List, Map } from 'immutable';

const initialState = {
    participants: 1
};

function currentSex (state = initialState, action) {
    switch (action.type) {
        case 'SET_PARTICIPANTS':
            return {
                ...state,
                participants:action.participants
            }
    }
    return state
}

export default currentSex;

Actions

export const SET_PARTICIPANTS = 'SET_PARTICIPANTS';

export function setParticipants(participants) {
    return {
        type: SET_PARTICIPANTS,
        participants: participants
    }
}

How I have done my connect, as I believe this helps

function mapStateToProps(state, ownProps) {
    return {
        errorMessage: state.errorMessage,
        inputValue: ownProps.location.pathname.substring(1)
    }
}

export default connect(mapStateToProps, { })(App)

Please forgive me is this isn't enough or completely the wrong information.

But why does my page no re-render when i can see the state has changed?

edit

Its worth mentioning that my state has objects inside of it:

Answer 1

In your mapStateToProps you need to add the state that you want to render inside your component. In this case it looks like state.participants .

function mapStateToProps(state, ownProps) {
    return {
        errorMessage: state.errorMessage,
        participants: state.participants,
        inputValue: ownProps.location.pathname.substring(1)
    }
}

And then use this.props.participants in your component.

import * as actions from '../actions';

/* ... */

render(){
    ....
    <div className={data.participants}>
        +{this.props.participants}
    </div>
    ....
}

/* ... */

export default connect(mapStateToProps, actions)(App)   

edit

And add the actions to your connect function, as well as importing them. Call your actions using this.props.currentSex(3) inside the function within your component that handles change events.