优质广告供应商

广告是为了更好地支持作者创作

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还是需要一些时间的,本文档就不一一介绍了。

优质广告供应商

广告是为了更好地支持作者创作

推荐阅读更多精彩内容