如何在使用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容器中發送操作？

回答

相關問題