redux教程（一）——理解redux

redux是干什么的

react的页面应用愈来愈复杂，数据和状态的管理也愈来愈复杂，甚至夹杂着ajax异步请求对数据状态的变动。不知从何时开始——react框架的数据状态的管理已经愈来愈难以控制和预测！！

redux就是针对难以处理的数据管理，提出的一种解决方案。它可以让你的页面的数据管理更轻松。

为何要用redux

当问到为何要使用redux的时候，我以为有一句话特别经典。

当你不知道为何要用redux的时候，那就不须要使用redux。。。

至于当你在你的项目中，关于数据管理方面，有你处理不了的状况出现时，这是时候才用redux。。。

redux为何可以解决复杂数据状态管理的问题

redux认为，基于一个web应用，数据和视图是一一对应的关系！
而咱们只须要维护一个公有的store，当这个store变化时，视图才跟着变化。
这是redux解决数据状态管理的核心点！！！！

针对redux，该如何来学习

redux有很是好的官方文档文档地址。

但是大多数初学者读这篇文档，读的很困难！读完仍是不会redux！！

以前有react社区的一个小伙这么说过，redux学会很简单，官方文档不细读10遍，就别好意思说读不懂，只是功夫没下到！我听了这样的话，果真，我也会redux了。

我学习的过程当中发现，redux的学习是一个系统的过程，你不可能越过基础概念，就可以很快的敲出示例demo。咱们大多数人的学习过程通常是——一个按部就班、逐步迭代的过程，而redux的学习却不是这样，你不看概念，就无法理解示例demo，你不敲示例demo，你就没法彻底理解redux的各类基础概念。因此最终发现，redux的最好的学习方式就是，通读一个个的概念，敲出示例demo，再根据示例demo，反过来理解概念，循环往复，总能学的懂！！

redux基础概念

一、store是什么？

store是redux库中的createStore方法，生成的一个对象，这个对象中，存储的就是咱们的公有数据。

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

其中fn就是createStore接受的一个参数，这个参数是一个函数，用来返回store对象存储的数据对象。

二、state
store是一个对象，可是要获取这个对象中的全部储存的数据，须要调用它的方法：store.getState(),而state就是store.getState()获得的数据。

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

三、Action
redux认为，一个state对应着一个view，state改变，view跟着改变。对于用户而言，接触到的可能就只有view，因此redux须要提供一种用户经过view，来更改state，从而让view发生变化的东西。而这个东西就是Action。

action用来描述的是用户行为，它是一个对象，redux经过dispatch这个action来更改state。至于dispatch是什么，这个后面会说明。

var action = {
    type: 'ADD',
    text: 'value'
}

type是Action定义的类型，是一个必须属性。

四、action Creator
用户的行为那么多，仅仅用对象的方式来表示，显得太麻烦！可使用一个函数的方式来描述action，就叫action creator。

//action creator
function add(text){
    return {
        type: "ADD",
        text: text
    }
}

五、store.dispatch()
咱们定义好了用户的行为，但是这个行为咱们要怎么才算触发呢？

在redux中，触发用户行为的方式只有一个store.dispatch(),这也是惟一一种更改数据的方式。

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

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

这里的dispatch接受一个action，进行触发更改state的命令。

六、reducer
用户进行dispatch了，数据要进行变化，但是这个变化的过程咱们没有描述，好比dispatch一个action，咱们仍是不知道一个数字是加一仍是减一，又或者有其余的什么操做，而reducer就是用来定义这种操做的过程的！！

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

这是一个完整的reducer函数进行状态变动的过程。
若是我接受的action为ADD类型，那么我进行state+action.payload操做。
若是是默认的，我就直接返回state。

七、store.subscribe()
这个subscribe函数，是用来注册一个监听函数的，每当state发生改变的时候，subscribe注册的函数就会被触发，这个被注册的函数就是store.subscribe(listener)中的参数listener。

这一篇，主要说明了redux的一些基础概念、理解。 下一篇，进行说明redux的简单使用和实现原理。