Redux action 、reducer、store讲解 系列一

       最近在RN项目中，对于处理state，真的很尴尬，经常出现警告。到处都设置setState来起到刷新页面。。。（喂，110吗，state乱搞，场面控制不住了）。后来发现有个Redux，就去研究了下，Redux 是 JavaScript 状态容器，提供可预测化的状态管理，说白点，它的作用就是管理state，所有的state改变，都要经过redux。

      Redux 的三要素：action、reducer，store，接下来看看这些货到底是什么东东，有什么用。

      action：官方的解释是  Action是把数据从应用传到 store 的有效载荷，它是 store 数据的唯一来源；我的理解是action是发出做某件事的请求，本身不做任何逻辑处理，只是一个纯函数（在js中就是一个普通的对象），action 内必须使用一个字符串类型的type字段来表示将要执行的动作,我们来看看它的结构：

{

type:'DELETE_BOOK'

text:'这里可不填这里，action里面只要有type 就成，其他的可有可无，根据自己的情况'

}

action和action创建函数的区别：Action 创建函数就是生成 action 的方法，这样做将使 action 创建函数更容易被移植和测试。

来看看action创建函数：

export function DeleteBook(txt) {

return {

      type:'DELETE_BOOK',

      txt：txt

     } 

}

reducer：action发出了做某件事的请求，只是描述了要做某件事，并没有去改变state来更新界面，reducer就是根据action的type来处理不同的事件（type唯一，不要重复）。说到这，我又想到了一张图，那些领导翘着个二郎腿，说出了他的想法，要做成什么样，真正搬砖的却是程序员。。。

苦逼的程序员

来看看reducer是怎么样的：

function deleteBook(state = {}, action) {

switch (action.type) {

case 'DETETE_BOOK':

          return Object.assign({}, state, {

                      txt: action.txt

                     })

default:

return state

}

}

reducer 也是一个普通的函数，传入的两个参数，state是当前的数据，action就是需要处理的事件。接收action和当前的state，返回新的state。

(previousState, action) => newState

store：通过以上内容，我们知道了action来描述“发生了什么”，和使用reducers来根据 action 更新 state 的用法。Store就是把它们联系到一起的对象，提供dispatch(action)方法更新 state，还有个getState方法获取state。

import  book from'./reducers'

import {deleteBook} from './action/book'

let  store=createStore(book)    //关联reducer

store.dispatch(deleteBook);   

      好，这三个概念都已经知道是什么了，接下来，看看他们是如何关联在一块，如何发一个action，然后修改state来起到更新界面。

我们看看以上代码，let  store=createStore(book)  ，把book 的  reducer添加到store里面的currentReducer。触发deleteBook操作的时候，调用store.dispatch(deleteBook)，你会发现确实是更新成功了，我们看看 createStore的部分源码：

图1

看看图1，reducer赋值给了currentReducer， getState() 返回了当前的state。

图2

      看看图2 ，dispatch方法，标的 129行 ，就是这里，没错就是这里，通过reducer处理数据后返回的state赋值给当前的currentState。

      通过如上，他们三者已经联系上了，看到这，相信各位大兄弟已经很了解了，这只是redux的基础部分，之后会分析下中间件之类的，且听下回分解。

参考资料：

redux的源码：https://github.com/chyingp/redux-source-insight/blob/master/redux/src/createStore.js

redux的中文文档：http://cn.redux.js.org/index.html