根路由组件未连接到Redux

Question

我陷入一个似乎很明显的问题：路由器的根组件未订阅存储更改，即使调用了mapStateToProps，它也没有接收到道具。

我的路线被定义为普通对象：

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

然后在创建应用程序时导入此对象：

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

我的RootComponent看起来像这样：

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)

单击按钮后，调度工作正常，因为在DevTools中可以看到状态已更改。 mapStateToProps和mapDispatchToProps也被调用，但我的RootComponent从未更新。

如果我对子路线使用相同的代码，则一切正常！ 关于为什么未订阅RootComponent的任何想法？

编辑：顺便说一句， <AppContainer />正在使用react-redux <Provider /> 。 代码是这样的：

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

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

Answer 1

您没有提到使用react-redux中的<Provider />组件，我想您必须在某个地方定义它，但是如果您不这样做的话：

正是<Provider />使存储可用于您在容器组件中进行的connect调用。

查看文档以获取更多信息

Answer 2

好的，发现了问题：原来代码mapStateToProps不能正确地从状态中获取值（即使我已经打印了100万次该状态并且没有意识到这一点）。 因此，在状态没有变化的情况下，该组件显然没有被更新。