Question

我遇到了一个似乎很明显的问题：路由器的根组件没有订阅商店更改，即使调用了mapStateToProps，它也没有收到道具。< / p>

我的路线被定义为普通物体：

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

然后在创建App时导入此对象：

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 />正在使用<Provider />中的react-redux。代码是这样的：

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

2 个答案: