根路由组件未连接到 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 /> 使存储可用于您在容器组件中进行的连接调用。

Check out the docs for more info

Answer 2

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

根路由组件未连接到 redux

Root route component not connecting to redux

javascript

reactjs

react-router

react-redux