redux深入理解

1.为什么会出现redux

前端技术越来越强，开发者对于前端页面的体验要求也越来越高，大家开始琢磨着怎么才能提升页面的访问速度，于是单页面应用也随之而生。先简单吹一波单页面应用，因为redux主要是解决单页面应用的痛点，当然，不是单页面应用的话也可以使用（个人观点）

单页面应用最大的优点就是：

  1. 用户体验好、快，内容的改变不需要重新加载整个页面
  2. 页面可以减少很多的ajax资源请求，对服务器压力小。

当然，其缺点也显而易见：

  1. 你只有一个页面，SEO肯定难度大啊（这是纯天然劣势），不过知乎上看到一篇文章，关于spa的搜索引擎优化，<a href="http://zhanzhang.baidu.com/college/articleinfo?id=294" target="_blank">链接在此</a>
  2. 你只有一个页面，浏览器中的前进后退按钮肯定不能用，当然，这也有解决办法，利用URI中的散列+iframe实现，想知道的自行google。
  3. 初次加载耗时多，这个是真没办法完全解决，只能说尽量做优化，比如说一些不带导航的页面可以延迟加载（我自己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

借用阮老师的一张图：

77c62dc8a05ab33696f81eebfb9f1958
77c62dc8a05ab33696f81eebfb9f1958

简单来说，没有遇到难题，就别用redux。在此啰嗦一句，阮老师有redux的文章，写的非常的通俗易懂，这是阮老师文章的特色，大吹一波。（图好像看的不太清楚。大家可以点击此处，直接看看阮老师的文章）

3.redux的使用

由于这次文档主要讲redux，所以中间自己做单页面应用demo的过程就不细说了，总之，效果如下图：

GIF.gif
GIF.gif

可以看到，这个demo是单页面应用，在我点击下面的按钮的时候（软件问题，看不到鼠标，但其实我是点击了的），页面的hash值是会改变的，页面的内容也会根据导航的改变而改变，但是，导航的点击并不会使导航高亮，也就是说没有activeStyle，所以我们引入redux来做导航底部样式的状态管理。

Redux 的设计思想很简单，就两句话：

  1. Web 应用是一个状态机，视图与状态是一一对应的。
  2. 所有的状态，保存在一个对象里面。

在组件化的应用中（比如react、vue2.0等），会有着大量的组件层级关系，深嵌套的组件与浅层父组件进行数据交互，变得十分繁琐困难。而redux，站在一个服务级别的角度，可以毫无阻碍地（这个得益于react的context机制，后面会讲解）将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。

redux有三大准则

  1. 单一数据源
    整个应用状态，都应该被存储在单一store的对象树中。
  2. 只读状态
    唯一可以修改状态的方式，就是发送（dispatch）一个动作（Action），通俗来讲，就是说只有getter，没有setter。
  3. 使用纯函数去修改状态
    不知道什么是纯函数的看这篇文章先自行科普一下，纯函数保障了状态的稳定性，不会因不同环境导致应用程序出现不同情况，听说是redux真正的精髓，日后可以深入了解。
b5288dfccbcef738a574c429e22de73d.png
b5288dfccbcef738a574c429e22de73d.png

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;
};

用一张图来形容三者的关系：


e5353213ecb6bb47728e50ae51554603.png
e5353213ecb6bb47728e50ae51554603.png

了解了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之后，运行的效果如下：

GIF.gif
GIF.gif

看起来很完美，貌似没什么问题；但其实有坑，我旨在利用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还是需要一些时间的，本文档就不一一介绍了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容