1.为什么会出现redux
前端技术越来越强，开发者对于前端页面的体验要求也越来越高，大家开始琢磨着怎么才能提升页面的访问速度，于是单页面应用也随之而生。先简单吹一波单页面应用，因为redux主要是解决单页面应用的痛点，当然，不是单页面应用的话也可以使用（个人观点）
单页面应用最大的优点就是：
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 页面可以减少很多的ajax资源请求，对服务器压力小。
当然，其缺点也显而易见：
- 你只有一个页面，SEO肯定难度大啊（这是纯天然劣势），不过知乎上看到一篇文章，关于spa的搜索引擎优化，<a href="http://zhanzhang.baidu.com/college/articleinfo?id=294" target="_blank">链接在此</a>
- 你只有一个页面，浏览器中的前进后退按钮肯定不能用，当然，这也有解决办法，利用URI中的散列+iframe实现，想知道的自行google。
- 初次加载耗时多，这个是真没办法完全解决，只能说尽量做优化，比如说一些不带导航的页面可以延迟加载（我自己yy的，感觉难度很大），或者说一些三方库，尽量用大公司的CDN。
所以说单页面应用肯定是趋势，但这跟redux有什么关系呢？单页面其实是有一些痛点的，官方的解释是：对于复杂的单页面应用，状态（state）管理非常重要。state 可能包括：服务端的响应数据、本地对响应数据的缓存、本地创建的数据（比如，表单数据）以及一些 UI 的状态信息（比如，路由、选中的 tab、是否显示下拉列表、页码控制等等）。如果 state 变化不可预测，就会难于调试（state 不易重现，很难复现一些 bug）和不易于扩展（比如，优化更新渲染、服务端渲染、路由切换时获取数据等等）。
说一个我曾经遇到的问题，当初做移动端spa的时候，移动端通常都有导航栏（就拿淘宝来说，有首页、购物车等等），我们使用react-router的时候，点击不同的导航栏会导致路由变化，但底部的导航高亮显示问题并不好处理，我们只能通过一个地方去存储，比如cookies, localstorage等等，不仅显得很low，而且太不安全；当然也可以通过截取url的方式，也太low，所以我们当时大胆的使用了flux来做状态管理，整个页面的数据状态是共享的，持久的。flux出来之后，解决了很多大型项目状态管理问题，而redux的出现，将 flux与函数式编程结合一起，很短时间内就让react成为了最热门的前端架构。
2.什么时候要使用redux
借用阮老师的一张图：
简单来说，没有遇到难题，就别用redux。在此啰嗦一句，阮老师有redux的文章，写的非常的通俗易懂，这是阮老师文章的特色，大吹一波。（图好像看的不太清楚。大家可以点击此处，直接看看阮老师的文章）
3.redux的使用
由于这次文档主要讲redux，所以中间自己做单页面应用demo的过程就不细说了，总之，效果如下图：
可以看到，这个demo是单页面应用，在我点击下面的按钮的时候（软件问题，看不到鼠标，但其实我是点击了的），页面的hash值是会改变的，页面的内容也会根据导航的改变而改变，但是，导航的点击并不会使导航高亮，也就是说没有activeStyle，所以我们引入redux来做导航底部样式的状态管理。
Redux 的设计思想很简单，就两句话：
- Web 应用是一个状态机，视图与状态是一一对应的。
- 所有的状态，保存在一个对象里面。
在组件化的应用中（比如react、vue2.0等），会有着大量的组件层级关系，深嵌套的组件与浅层父组件进行数据交互，变得十分繁琐困难。而redux，站在一个服务级别的角度，可以毫无阻碍地（这个得益于react的context机制，后面会讲解）将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。
redux有三大准则
- 单一数据源
整个应用状态，都应该被存储在单一store的对象树中。 - 只读状态
唯一可以修改状态的方式，就是发送（dispatch）一个动作（Action），通俗来讲，就是说只有getter，没有setter。 - 使用纯函数去修改状态
不知道什么是纯函数的看这篇文章先自行科普一下，纯函数保障了状态的稳定性，不会因不同环境导致应用程序出现不同情况，听说是redux真正的精髓，日后可以深入了解。
redux的几个概念
（1）Action
Action是唯一可以改变状态的途径，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action会按顺序执行，这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的，表示 Action 的名称：
const action = {
type: 'home',
msg: 'Write Document'
};
（2）Store
Store管理着整个应用的状态，Store提供了一个方法dispatch，这个就是用来发送一个动作，去修改Store里面的状态，然后可以通过getState方法来重新获得最新的状态，也就是state。
（3）Reducer
当dispatch之后，getState的状态发生了改变，Reducer就是用来修改状态的。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
const reducer = function (state, action) {
// ...
return new_state;
};
用一张图来形容三者的关系：
了解了redux的工作原理之后，接下来我们把redux应用到项目之中。
首先我们引入redux，得到createStore方法，并创建store；创建store要求传入reducer函数，所以我们必须先写reducer函数。因为我们现在的需求主要是为了做底部导航栏的状态管理，所以state里面只要记录不同路由对应的底部导航栏是哪个，根据传入的Action_Type不同，来返回不同的state，reducer函数代码如下：
const defalutState = 'home';
export default (state = defalutState, action) => {
switch (action.type) {
case 'HOME':
return 'home';
case 'LIST' :
return 'list';
case 'SHOPCAR' :
return 'shopCar';
case 'MY' :
return 'my';
default:
return state;
}
}
底部导航栏的代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router'
import { createStore } from 'redux';
import reducer from '../redux/reducer.js';
const store = createStore(reducer);
import '../../css/page/footer.scss';
const changeState = (type) => {
store.dispatch({type});
};
class Footer extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
render() {
const state = store.getState();
return (
<ul className="footer">
<li><Link className={state == 'home' ? 'active' : ''} to="/" onClick={changeState.bind(this, 'HOME')}>首页</Link></li>
<li><Link className={state == 'list' ? 'active' : ''} to="/list" onClick={changeState.bind(this, 'LIST')}>分类</Link></li>
<li><Link className={state == 'shopCar' ? 'active' : ''} to="/shopCar" onClick={changeState.bind(this, 'SHOPCAR')}>购物车</Link></li>
<li><Link className={state == 'my' ? 'active' : ''} to="/my" onClick={changeState.bind(this, 'MY')}>我的</Link></li>
</ul>
);
}
}
export default Footer;
加入redux之后，运行的效果如下：
看起来很完美，貌似没什么问题；但其实有坑，我旨在利用redux解决单页面路由问题，但是如果我们的网址是直接访问list页面的话，此时页面一进来，state的默认值是home，首页的导航高亮，很铭心与要求不符，所以，我们需要改造。我们把底部导航的点击去除，把store.dispatch写在路由对应的js文件里面，在加载不同路由的时候调用该方法。
最后为了方便管理，我又把store、action、dispatch、reducer方法都提取出来。代码如下：
// action.js
export default (type, msg = type) => {
return {
type,
msg
}
}
// dispatch.js
import store from './store.js';
export default (obj) => {
store.dispatch(obj);
};
// reducer.js
const defalutState = 'home';
export default (state = defalutState, action) => {
switch (action.type) {
case 'HOME':
return 'home';
case 'LIST' :
return 'list';
case 'SHOPCAR' :
return 'shopCar';
case 'MY' :
return 'my';
default:
return state;
}
}
// store.js
import { createStore } from 'redux';
import reducer from '../redux/reducer.js';
export default createStore(reducer);
其实redux还有一些中间件和异步操作来足以维护大型项目，而且，为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，要全部掌握redux还是需要一些时间的，本文档就不一一介绍了。
