Redux基础知识

本文主要讲解Redux的基本介绍及其语法

1.什么是Redux？

第一眼看上去Redux好像和React有点像，别管Redux是什么，我们只去关心Redux怎么来的。
如果非要定义Redux的话，那么Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

好了，知道大家看不懂，其实我也不能从上面这句话里面理解到什么。没关系，让我来把这句话简单化。
在此之前，给大家看下之前前端人员写的小程序的部分代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

//红框验证
isValidate(){
  var params=this.data.params,
  isValidateDefault={
    title:true,
    time:true,
    allOK:false
  },len=params['showItem'].length,items=params['showItem'],
  endTime=this.data.endTime,count=0,arr=[];
  //还原到默认
  for(var i in items){
    items[i]['isRed']=false;
  }
  this.setData({
  'isValidate':isValidateDefault,
  'params.item':items
  });
  //标题
  if(params['title'] == ''){
    this.setData({
      'isValidate.title':false
    });
    return;
  }
  //选项的值少于两个
  for(var i in items){
    if(items[i]['val'] != ''){
      count++;
      if (arr.indexOf(items[i]['val']) > -1) {
        app.showModal('选项不能重复');
        items[i]['isRed']=true;
        this.setData({
          'params.item':items
        });
        count=0;
        return;
      }
      arr.push(items[i]['val']);
    }
  }
  if(count < 2){
    items[count]['isRed']=true;
     this.setData({
        'params.item':items
     });
    return;
  }else{
    count=0;
  }
  //时间
  for(var i in endTime){
    if(endTime[i]['isSelected']){
      count++;
    }
  }
  if(count==0){
    this.setData({
      'isValidate.time':false
    });
    return;
  }
  this.setData({
    'isValidate.allOK':true
  });
}

上面的代码只是一个简单的功能实现，就是在做验证。如果用户输入的标题为空、输入的选项不能少于两个、输入的选项不能重复、时间没有选择，会从上到下依次出现红框或者提示信息。

以前用JQuery思想就是获取需要更改样式的DOM，进行addClass操作。现在不能直接操作DOM，因此只能操作这些数据去动态更新DOM。我们把更新DOM的数据叫state，即状态。

除了更新DOM的数据叫state，还有很多数据也叫state。
比如：缓存的数据、本地生成尚未持久化到服务器的数据等等。

试想一下，每个页面都有更新DOM、给服务器的数据的state。每个页面小到按钮的切换，显隐交互，大到提交表单数据，从服务器获取数据给予不同页面的展示，这些都离不开state。
除此外，每个页面与页面都有错综复杂的联系，比如一个页面依赖另一页面的数据，一个页面的改动要让另一个页面引起变化，这些也都离不开state。
一两个页面还容易处理，如果有五个页面、十个页面、二十个、五十个…

前端开发者正在经受前所未有的复杂性，难道就这么放弃了吗？当然不是。
Redux所做的事情就是想把所有的state放在一个对象里面。

Redux这样做有什么好处呢？便于维护和扩展，逻辑不混乱
Redux适用于哪些场景呢？
1.交互复杂的页面
2.一个页面有多个数据来源
3.一个页面的改变，间接影响另一个页面

简单说就是适用于多交互、多页面、多数据源的应用。

2.Redux基本概念

1.Store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。

1
2

import { createStore } from 'redux';
const store = createStore(fn);

2.State

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。

1
2
3
4

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

3.Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称，其他属性可以自由设置。

1
2
3
4

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

4.Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

1
2
3
4

const reducer = function (state, action) {
  // ...
  return new_state;
};

5.View

视图，指每个页面。