redux概念简介

redux是一个专门用于处理数据的第三方库（插件）,作用是使MVM，MVVM等框架使用起来视图与控制层更加明显。很多人听到redux都是因为react-redux这一个插件。其实react-redux只是redux的一部分而已。

redux就像Jquery一样，可以在任何的地方使用，只要你用得到他，就像最开始说的，他就是一个插件而已。

redux的三大要素

redux用来处理数据，存在三大要素

如上面图上所示，redux存在三个重要的概念

• action
• reducer
• store

store

store的英文的意思是有：贮存, 贮备, 储藏, 存放。所以，我们这里的store也是如此，我们可以把吧他比作是一个仓库。这个仓库的作用就是把所有的我们需要的数据存在起来。拿react举例（这里假如你已经了解过react了），react中的所有的数据都是存放在这个仓库里面。一个项目只有唯一的一个store。

同样是以react为例，那么store里面究竟存放的是什么呢？

我们知道，在react中，我们控制一个组件是通过这个组件内部的state状态来实现的，如果我们需要修改一个组件的状态，那么我们就需要通过react的setState方法来实现，修改组件的状态。那么在redux的store中，这个仓库中存在的就是整个项目的state。当然，这里的整个项目的state可以是一个，也可以是无数个（即每一个组件单独的状态），仓库中的数据取决于你的项目。

reducer

reducer的英文的意思是：减速器，减压器，还原剂的意思。那么在这里，他表示的是什么呢？其实这里我们也可以把它看做是还原(剂)的意思。即：还原。

那么他是还原的是什么呢？在react里面，还原的就是state。

在redux里面，reducer其实就是一个函数，一个纯函数（给定一个输入，必有有且只有一个唯一的输出）拿函数来，输入就是函数的参数，输出就是函数的返回值。

在redux里面，每一个reducer的输入都有：状态参数（action）以及目前的state。返回值是一个新的state状态值。这就把react中的state单独剥离出来了。

上面说到的store，里面就同时也存放了这些reducer。

那么store是怎么来的呢。我们使用redux提供的createStore方法来创建store。

let store = crateStore(reducers)

所有的reducer我们都需要绑定在一起，使用redux提供的combineReducers把每一个reducer合并成一个对象。

import { combineReducers } from 'redux';
const reducders = combineReducers({
  reducer1,
  reducer2,
  ......
})

action

action的意思是：动作，操作。这里也是一样，就是一个动作。

我们在说reducer的时候提到了action，action非常简单，我们就把他理解为一个信号表示。为了让程序读懂我们究竟是需要做什么样的动作，我们需要给action提供一个属性，表示他是整个项目中为一个那一个。这个属性就是：type。我们还可能给这个action添加一个其他的属性，那么这个action就成了一个对象了。比如：

{
  type: 'ADD_TODO',
  text: '添加一个新的todo代办项'
}

但是这样写的话用起来可能会很麻烦，而且text属性无法进行扩展，所以，在使用action的时候，我们通常还是把它写成一个函数。即：

function addTodo(text){
  return {
    type: 'ADD_TODO',
    text
  }
}

# 使用ES6的写法
const addTodo = text => {type: 'ADD_TODO', text}

这就是一个action。

简单的梳理

我们用这样一个例子来简单的梳理一下原理。

在一个图书馆里面，有许多的书，他们有的被借阅了，有的仍然在书架上面放着，这些书的状态都在图书馆的电子屏幕上面显示着。这里的图书的是否被借阅的状态我们可以看做是一个state。有三个人甲，乙，丙，甲需要去借书A，借完书以后我们需要让乙和丙都知道图书被借阅了。电子屏幕上面的图上A的状态就会发生变化，即state的值发生了变化。这时候甲乙丙三个人都知道了图书A的状态了。这里的甲乙丙三个人可以看做是react中的组件。

但是上面的存在一个问题，甲去借书，不可能借完书就走了，或者直接就去拿书了。这时候我们需要有一个管理者，即reducer。他来判断甲是否可以借书，即他来控制图书A的状态而不是甲乙丙（组件）控制图书A的状态。

其次就是甲怎么让管理者知道我要借的书是A而不是其他的呢？这时候就需要一个为一个标识（action）。{type: ‘A’, name: ‘图书A’}。怎么让管理员知道呢？redux提供了createStore方法，这个方法返回了一个方法dispatch，分发的意思。接收一个action，即store.dispatch(action)，执行之后，管理员修改了图书A的状态。

最后，乙和丙怎么知道图书A的状态发生了变化呢？同样，edux提供了createStore方法，这个方法返回了一个方法subscribe，订阅的意思。乙和丙需要订阅图书A的信息才可以接收到图书A的状态变化，即store.subscribe(reducer)。