Redux是React生態(tài)系統(tǒng)很重要的一部分。我們希望將React Router和Redux的集成盡可能無縫地集成到想要同時使用它們的人們身上。
阻塞更新
通常，React Router和Redux可以很好地協(xié)同工作。有時，當(dāng)導(dǎo)航改變時，應(yīng)用程序的某個組件（子路由或者選中的某個導(dǎo)航鏈接）不會更新。
包含以下情況：
- 1、組件通過connect()方法連接到redux
- 2、組件是“非路由組件”，也就是不是通過
<Route component={SomeConnectedThing}/>這種方式渲染的。
問題是Redux實(shí)現(xiàn)了shouldComponentUpdate，如果它沒有從路由器接收屬性，則沒有任何跡象表明該組件發(fā)生了任何變化。這很容易解決。找到連接組件的位置并將其包裝在withRouter中。
// before
export default connect(mapStateToProps)(Something)
// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))
深度合成
有些人想：
- 從store中獲取并同步數(shù)據(jù)
- 通過派發(fā)actions進(jìn)行導(dǎo)航
- 支持Redux devtools中路由更改的時間旅行調(diào)試。
所有的這些需要更深入的整合
我們建議您不要將您的路由保存在Redux的store中。理由如下；
- 路由數(shù)據(jù)已經(jīng)成為大多數(shù)組件的核心。無論是來自store還是router，您的組件代碼都大致相同。
- 大多數(shù)情況下，你可以使用<Link>、<NavLink>、<Redirect>進(jìn)行導(dǎo)航。有時您可能還需要在初始化的某個異步任務(wù)之后以編程方式導(dǎo)航。比如，當(dāng)用戶提交一個登錄表單之后派發(fā)一個action。你的trunk, saga以及其他一步任務(wù)需要驗(yàn)證憑據(jù)，如果驗(yàn)證成功，它需要以某種跳轉(zhuǎn)方式跳轉(zhuǎn)到一個新的頁面。直接的解決辦法是在payload中包含history對象（所有<Route>組件都包含這個對象），然后你的異步任務(wù)中就可以以某種合適的方式使用該對象進(jìn)行導(dǎo)航了
- 路由的變化對于時間旅行調(diào)試不是很重要。唯一明顯的例子是調(diào)試路由器/存儲同步的問題，如果你根本不同步，那么就不會存在這個問題。
但你如果強(qiáng)烈要同步store和router，可以試試connected React Router,第三方綁定React Router v4和Redux。
