Reactjs 如何使用redux和react路由器组织状态？

Redux提倡使用具有单一状态的单一存储。但是，使用react router，您可以获得多个页面，每个页面都有自己的顶级根组件

---

我们应该如何用一个有多个页面的react路由器应用程序连接redux？React router 1.0不再允许您向路由传递道具，因此使路由器成为包含所有页面状态的顶级组件不再可能，也不可行

如果您使用的是redux+react路由器，我强烈建议您也使用redux路由器-这将允许您在商店中保存路由信息-我通常有以下设置

redux路由器：^1.0.0-beta3/ react路由器“^1.0.0-rc1/ redux:“^3.0.2/ 反应：“^0.14.0

//index.js[入口点]

从“React”导入React；
从“react dom”导入react dom；
从“react Router”导入{Router，Route}；
从'react redux'导入{Provider}；
从“/utils/create store”导入createStore；
从“./bootstrap/routes”导入路由；
从“redux路由器”导入{ReduxRouter}；
const store=createStore（路由）；
ReactDOM.render(
{routes}
,
document.getElementById（'root'））
);

//create-store.js

从'redux'导入{applyMiddleware，createStore，combinereducer，compose}；
从“../reducers/index”导入*作为减速机；
从“/promise middleware”导入promiseMiddleware；
从“redux路由器”导入{routerStateReducer，reduxReactRouter}；
从“/历史记录”导入历史记录
/**
*设置redux存储。负责加载还原程序和中间件。
*
*@param路线
*/
导出默认函数创建（路由）{
常数复合减速机=组合减速机({
路由器：routerStateReducer，
…异径管
});
const finalCreateStore=compose（applyMiddleware（promiseMiddleware）），
Redux路由器({
路线，
历史
}))（createStore）；
let store=finalCreateStore（composedReducers）；
退货店；
}

//routes.js

从“React”导入React；
从“反应路由器”导入{Route}；
从“./App”导入应用程序；
module.exports=(
…你所有的路线都在这里
);

//app.js

import React，{PropTypes}来自'React'；
从'react redux'导入{connect}；
导出默认类App扩展React.Component{
render（）{
const{props:{children}}=this；
返回(
{儿童}
);
}
}

---

因此，正如您所看到的，有一个更高阶的组件封装了其余的路由

Redux路由器不再与react路由器v4兼容，上述解决方案将无法工作。

因此，我建议使用。与redux路由器不同，它不依赖react路由器，而是它的替代品

使用它，您可以执行以下操作：

从异步操作推送到新路由：

export function navigateAbout() {
  return (dispatch) => {
    dispatch(push('/about'))
  }
}

查看redux开发工具中的路由器详细信息（当前路径、查询字符串和参数），并从存储中访问这些详细信息，就像访问任何其他道具一样：

function mapStateToProps(state) {
  return {
    string: state.router.query.string
  }
}

另外，您可以参考或与redux一起使用已经实现的小redux