redux-router与react-router-rdeux的不同

此文仅是redux-router页面上的部分翻译

react-router-redux

react-router-redux(之前称为redux-simple-router)使用了一个不一样的方式去集成路由。react-router-redux让React Router去做所有沉重的任务,并同步url中的数据到store的history location对象里。这代表着用户可以直接使用React Router的API,并从这一堆文档和例子中获益。

react-router-redux的README中有一个非常有用的示意图,如下:

redux (store.routing) ↔︎ react-router-redux ↔︎ history (history.location) ↔︎ react-router

这种方式易于理解,但有些一些需要注意的地方:

  1. history location对象不包含React Router的参数,它们必须被React Router组件向下传递,或被重新计算。(The history location object does not include React Router params and they must be either passed down from a React Router component or recomputed.)
  2. 不鼓励(危险)将store中的数据连接到组件里,因为store中的数据在React Router的属性改变后,有潜在的更新可能性, 因此当location store data与向下传递而来的location对象(从React Router到组件)不同时,这就出现了一个互相竞争的场景。

react-router-redux 鼓励用户在React Router中的component中直接使用props(props会向下传递到任何被渲染的component中)。 这意味着如果您想要从comonpent tree中获取location data, 您可能需要将它向下传递,亦或使用React的Context特性。

redux-router

这个项目从一方面来说,使用的方法是将完整的React Router数据存储在Redux Store中。这样做的主要好处是: 被redux-router向下传递到路由中的组件的props, 允许和存储在store中的数据不同。 因此可连接router的数据到任何您想要的component中。 您还可以直接从store中获取路由的参数。 redux-router也提供了一个API来应对从Router(React Router现在并没有提供这个东西)中进行热交换路由。

关于redux-router的示意图如下:

redux (store.routing) ↔︎ redux-router ↔︎ react-router (via RouterContext)

这种方式同时也有一些限制:

  1. 路由数据不全是可序列化的(serializable)(因为组件和函数不能被直接序列化),因此对于那些帮助保存store到浏览器session中的开发工具扩展和类库,这可能会造成一些问题。但如果这些类库提供了忽略序列化store部分内容的方法,这样的问题可以被缓和,可是这并非总是可行的。
  2. redux-router利用了RouterContext的一些好的地方,来继续使用React Router的内部逻辑。 然而,redux-router必须要在自身中实现很多React Router已经有的东西,这会造成在升级路径上的延时。
  3. redux-router必须提供一个有细微区别的顶层API(因为第2点),即使他们的路由的逻辑/匹配模式可能是相同的。

最终,您对这些库的选择取决于您和您的项目需求. React-router-redux会继续得到更多的社区支持,因为它已经进入了reactjs github组织,也有了相当的关注度。 对于react-router,和redux的集成, 建议使用react-router-redux。 然而,您可能也会发现redux-router其实更符合您的项目需求。只要有这样的需求存在,那redux-router就会继续被维护。