如何在使用React路由器时在Redux容器中发送操作?
问题描述:
我目前正在尝试使用React,React Router和Redux来实现SPA。如何在使用React路由器时在Redux容器中发送操作?
在这种情况下,我有两个分层路由共享相同的父级表示和容器组件,但基于该URL呈现不同的“子”表示组件。
例如:
/widgets/:slug
- >父+窗口小部件详细信息页面
/widgets/:slug/things/:thing
- >父+事情详细页面
我创建了容器组件,将呈现与父母一起的任何儿童。我遇到的问题是,我想我需要派遣从容器组件的动作(例如fetchWidgets(slug)
,这样mapStateToProps
将通过发送适用的道具(如widget
和thing
)到下面的表象成分。
什么我无法弄清楚是如何得到这两个dispatch
方法引用,并在同一个地方props.params.slug
或props.params.thing
属性引用,这样我可以实际派遣行动。
答
您应该使用终极版提供的连接功能,可通过状态&作为道具发送到您的容器中。
const mapStateToProps = (state) => {
return {
}
};
const mapDispatchToProps = (dispatch) => {
return {
action:() => dispatch(actionGenerator())
}
};
export default Container = connect(
mapStateToProps,
mapDispatchToProps
)(Component);
答
如果您想让动作创建者在一个地方打电话,您可以通过道具将它们发送给您的孩子组件。
<Parent
{ ...bar }
foo={ x => actions.handlefoo(x) }
/>
const Child = ({
barOne
barTwo
foo
}) =>
<div>
<input onChange={ foo() } />
{barOne}
{barTwo}
</div>
显然,这是伪代码,但它应证明它是多么的简单传递任何类型,包括函数的变量/对象,你的孩子的组件。
但是,这不是基本上让我的表象组件知道REDX吗?我正在考虑容器应该做实际的动作调度... –
你应该为容器组件做这个事情,然后把这个动作作为回调支撑传递给表示组件。 – tetutato