Question

我目前正在尝试使用React，React Router和Redux实现SPA。

在这种情况下，我有两个分层路由，它们共享相同的父表示和容器组件，但根据URL呈现不同的“子”表示组件。

例如：

/widgets/:slug - ＆gt; Parent + Widget详细信息页面

/widgets/:slug/things/:thing - ＆gt; Parent + Thing详细信息页面

我创建了容器组件，它将呈现父级和任何子级。我遇到的问题是我认为我需要从容器组件中调度一个动作（例如fetchWidgets(slug)，这样mapStateToProps将通过发送适用的道具（例如widget和{ {1}}）下面的演示组件。

我无法弄清楚如何在同一个地方同时获取thing方法引用和dispatch或props.params.slug属性引用，以便我可以实际调度操作

Answer 1

你应该使用redux提供的connect函数来传递state＆amp;作为道具进入你的容器。

const mapStateToProps = (state) => {
    return {

    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        action: () => dispatch(actionGenerator())
    }
};

export default Container = connect(
    mapStateToProps,
    mapDispatchToProps
)(Component);

Answer 2

如果您想将动作创建者的呼叫保持在一个地方，您可以通过道具将它们发送到您的子组件。

<Parent
    { ...bar }
    foo={ x => actions.handlefoo(x) }
/>

const Child = ({
    barOne
    barTwo
    foo
}) => 
<div>
  <input onChange={ foo() } />
    {barOne}
    {barTwo}
</div>

显然这是伪代码，但它应该证明将任何类型的变量/对象（包括函数）传递给子组件是多么简单。

使用React Router时，如何在Redux容器中调度操作？

2 个答案: