Cannot get to redux store using mergeProps(stateProps, dispatchProps, ownProps)

Hi,

I have 3 container components implemented as simple drop down lists presentation components. Options available to choose from are calculated based on choices in previous components.

Components and data flow:

OrganisationContainer -> select an org -> load available groups into -> OrganisationGroupsContainer -> select a group -> load available contacts into -> ContactsContainer

My problem occurs when I need access to the first container’s chosen value (via redux store) in the second container so that I can calculate options for third container.

Sample code:

// My redux store in its initial state is:
{ 
  orgName: '',
  orgsEnabled: ['NSA', 'FBI', 'MI6'],
  orgGroup: '',
  availableGroups: [],
  orgGroupContact: '',
  availableContacts: []
}

// Organisation container
const mapStateToProps = (state) => {
    return {
        orgName: state.orgName
        orgsEnabled: state.orgsEnabled
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onChange: (newOrg) => {
            dispatch(setOrgName(newOrg))
            dispatch(requestOrgGroups(newOrg))
            dispatch(setOrgGroup(''))
            dispatch(setContact(''))
        }
    }
}

const OrganisationContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(OrgComponent)

export default OrganisationContainer 

// OrganisationGroups container
const mapStateToProps = (state) => {
    return {
        orgGroup: state.orgGroup,
        availableGroups: state.availableGroups
    }
}

const mergeProps = (stateProps, dispatchProps, ownProps) => {
    return Object.assign({}, ownProps, {
        orgGroup: ownProps.orgGroup,
        availableGroups: stateProps.availableGroups,
        onChange: (newGroup) => {
            dispatchProps.setGroup(newGroup)
            dispatchProps.setContacts('')

            // PROBLEM here: stateProps.orgName returns undefined
            dispatchProps.requestContacts(stateProps.orgName, newGroup)
        }
    })
}

const actions = { setGroup, setContacts, requestContacts }

const OrganisationGroupsContainer  = connect(
    mapStateToProps,
    actions, 
    mergeProps
)(OrganisationGroupsComponent)

export default OrganisationGroupsContainer  


// app
const App = () => (
    <div>
        <Header/>
        <OrganisationContainer />
        <OrganisationGroupsContainer  />
        <ContactContainer />
    </div>
)

export default App

// main
let store = createStore(OrgReducer)

render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('app')
)

I have left out code for the ContactContainer, reducers, createStore, actions and other boilerplate as testing and stepping through shows that it all works fine – right code gets called at the right time.

The problem is stateProps.orgName in mergeProps : this is returning undefined even though the value is clearly set in the store.

I am doing my best to follow recommendations in #211 i.e. not using mapDispatchToProps and using mergeProps but still having no luck.

All containers are connected and if I simulate by replacing:

 dispatchProps.requestContacts(stateProps.orgName, newGroup)

//with

 dispatchProps.requestContacts('NSA', newGroup)

… it all works out fine.

Am I doing something obviously wrong? Should I be using some other pattern/paradigm?

[gaearon]

I am also closing the issue because this appears to be a usage question rather than a genuine issue with the library. Nevertheless feel free to post a link to the project reproducing it and I can try to take a look.

[gaearon]

Please provide a complete project reproducing the problem with instructions to reproduce it. It is hard to help because I don’t really understand what the code should be doing.