Redux 与路由

     要开发一个富客户端应用，有一个东西必不可少，那就是路由（router）系统。在React生态环境中，React-Router是公认的中最优秀的路由解决方案。它提供了与React思想十分贴切的声明式的路由系统我们通过<Router>，<Route>这两个标签以及一系列的属性定义整个React应用的解决方案。

一、路由的基本原理：

   1、保证视图和URL的同步,而视图可以看成是资源的一种表现。当用户在页面中进行操作时，应用会在若干个交互状态中切换，路由则可以记录下某些重要的状态，比如在一个博客系统中用户是否登录、在访问哪一篇文章、位于文章归档列表的第几页。而这些变化同样会被记录在浏览器的历史中，用户可以通过浏览器的前进、后退按钮切换状态，同样可以将 URL 分享给好友。

 2、用户可以通过手动输入或者与页面进行交互来改变 URL，然后通过同步或者异步的方式向服务端发送请求获取资源（当然，资源也可能存在于本地），成功后重新绘制 UI，原理如下图所示： 

二、React Router的特性：

       在React中，可以理解为一个组件就是一个方法，而props是它的参数，当props发生变化时，view就会重新绘制。在Router中也可以这么理解，一个route组件就是一个方法，而location就是它的参数，当location发生变化时，view也会重新绘制。

     1、声明式路由：

    允许开发者使用jsx标签书写声明式的路由，

     

import {Router, Route, browerHistory} from 'react-router';

const routes = (
    <Router history = {browerHistory}>
        <Route path = '/' component= {App} />
    </Router>
)

2、嵌套路由及路由匹配：

  在声明路由时，path属性指明了当前路由匹配的路径形式。若当路由需要参数，只用简单的加上‘ :参数名’即可若这个参数可选，则可用括号括起来。（：可选参数）。

import {Router, Route, IndexRoute, browerHistory} from 'react-router';

const routers = (
    <Router history = {browerHistory}>
        <Route path='/' component = {APP}>
             <IndexRoute omponent = {MailList}>
             <Route path='/mail/:mailId' component = {Mail}> //嵌套路由
        </Route >
    </Router>
)

3、支持多种路由切换的方式：   

路由的切换有两种方式：hashChange和history.pushState。

 而 react-router提供了俩种，browerHistory和hashHistory。hashHistory会在url中多出 /#/部分。

三、React Router Redux 

    Redux Router设计的比较繁琐，引入了太多的API,被后来的React Router Redux 所代替。

   1、将React Router与Redux Store绑定。

       React Router Redux 提供了直白的API—— syncHistoryWithStore来完成Redux Store的绑定工作。

我们只需要传入 React Router中的 history和Redux中的store即可获得一个增强后的history对象。

import {boowerHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import reducers from '<project-path>/reducers';

const  store  = createStore(reducers);
const history = syncHistoryWithStore(boowerHistory,store);

2、用Redux方式改变路由：

      在Redux中改变路由也是需要发送action的。但这之前我们需要对store做一些增强。

import {browerHistory} from 'react-router';
import {routerMiddleware} from ''react-router-redux;

const middleware = routerMiddleware(browerHistory);
const store = createStore(
    reducers,
    applyMiddleware(middleware )
);

首先，我们引入了React Router Redux提供的routerMiddleware，它实际上就是个middleware工厂，传入history对象，返回一个真正的Redux Milddleware。最终，在创建Redux store时，我们将这个middleware启用并作为第二个参数传给createStore方法，获得加强过的store对象。

最后就可以用 store.dispatch来分发一个路由了。

import {push} from 'react-router-redux';

store.dispatch((push('/home')))