根路由组件未连接到Redux

Question

I'm stuck on a problem that seems to be obvious: the root component of a router is not being subscribed to store changes and it's also not receiving the props even though the mapStateToProps is called.

My routes are defined as plain objects:

const createRoutes = (store) => {
    path: '/',
    component: RootComponent,
    indexRoute: Home,
    childRoutes: [
        SubRoute
    ]
}
export default createRoutes

Then I import this object when creating the App:

let render = () => {
    const routes = require('./routes').default(store);
    ReactDOM.render(
        <AppContainer store={store} routes={routes} />,
        MOUNT_NODE                                                                      
    ) 
}

My RootComponent looks like this:

const RootComponent = ({address, action}) => {
    <div>
        {console.log('addr: ' + address)}
        <button onClick={action}>test</button>
    </div>
}
const mapStateToProps = (state) => {
    console.log('mapStateToProps');
    return {address: state.address};
}
const mapDispatchToProps = (dispatch) => {
    action = (evt) => {
        console.log('mapDispatchToProps');
        dispatch({type: 'TEST', payload: {address: 'xxx'}});
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(RootComponent)

When I click the button, the dispatch works since I can see in the DevTools that the state is changed. The mapStateToProps and mapDispatchToProps are also invoked but my RootComponent is never updated.

If I do this same code for child routes, everything works fine! Any ideas on why RootComponent is not being subscribed to the store?

EDIT: By the way, <AppContainer /> is using <Provider /> from react-redux . The code is like this:

class AppContainer extends Component {
    render () {
        const { routes, store } = this.props

        return (
           <Provider store={store}>
               <Router history={browserHistory} routes={routes} />
           </Provider>
        )
    }
}

Answer 1

You make no mention of using the <Provider /> component from react-redux, I'm guessing you must be defining it somewhere but in case you're not:

It is the <Provider /> that makes the store available to the connect call you make in your container component.

Check out the docs for more info

Answer 2

Ok, found the problem: turned out that the code mapStateToProps was not getting the values from the state correctly (even though I have printed the state a million times and didn't realize that). So, with no changes in the state, the component was obviously not being updated.