react-router-redux

96
Andy_z
2016.06.22 18:33* 字数 448

react-router-redux

保持路由与应用状态(state)同步

早前库的名字为redux-simple-router
你是个聪明的人,使用Redux去管理你的应用状态(state),使用React Router去管理路由。
但是,这两个库不能协同工作。
react-router-redux库可以协调这两个库。

安装

npm install --save react-router-redux

工作原理

本库允许你使用React Router库中的api, 使用Redux库像平常一样去管理应用的状态state。 本库只是简单的加强了React Router库中history这个实例,以允许将history中接受到的变化反应到stae中去。

history + store(redux)--> react-router-redux --> 加强版history -->react-router

手册

看一个简单实例:

屏幕快照 2016-06-22 12.15.08.png

现在,你进行的所有页面导航和App导航,加强版的history会首先将新的路径通过Redux store传递,然后再通过React Router去更新组件树。

怎样查看导航事件,比如进行导航事件的分析

只需要通过histroy.listen去监听加强版history即可。当store更新时,通过一个函数接受一个location参数。

const history = syncHistoryWithStore(browserHistory, store) history.listen(location => analyticsService.track(location.pathname))
对于系统中的其它事件,你可以通过Redux store中的middleware去查看任何dispatched到store里 action。

在Redux store中使用Immutable.js后如何操作?

如果通过Immutable.js包装过store中的state,与标准步骤相比,你需要改动两个地方。
1.Provide your own reducer function that will receive actions of type LOCATION_CHANGE and return the payload merged into state.
2.Pass a selector to access the payload state and convert it to a JS object via the selectLocationState option on syncHistoryWithStore.
这两个

日记本
Web note ad 1