如何在使用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属性引用，这样我可以实际派遣行动。

来源

2016-08-21 Matt Hamann

您应该使用终极版提供的连接功能，可通过状态&作为道具发送到您的容器中。

const mapStateToProps = (state) => { 
    return { 

    } 
}; 

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

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

来源

2016-08-21 21:42:36 tetutato

但是，这不是基本上让我的表象组件知道REDX吗？我正在考虑容器应该做实际的动作调度... –

你应该为容器组件做这个事情，然后把这个动作作为回调支撑传递给表示组件。 – tetutato

如果您想让动作创建者在一个地方打电话，您可以通过道具将它们发送给您的孩子组件。

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

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

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

来源

2016-08-21 22:41:55 alexi2

如何在使用React路由器时在Redux容器中发送操作？

回答

相关问题