数据流 in redux

前不久用react和react-router写了个单页面应用，但写完后总感受还欠缺点什么，组件间的状态和数据相对较为独立，并且兄弟组件间的通讯很不方便。而后才了解到，在react应用中，能够存在一个负责整合数据流向的框架，因而就选择了redux.

根据个人理解下面说一下redux的思想：

redux由三个部分组成，即store，reducer以及action，直观一点，你能够把store理解为数据库，reducer是事件处理函数，action是触发事件。为何能够这么理解呢，由于整个redux的大体逻辑是这样的：

1 dispatch（action），即触发action，（事件发生）

2 reducer根据当前所触发action执行相对应的函数，更新state，（执行事件处理函数，更新数据库数据）

3 store的state会为应用所获取，像数据库同样

固然可能并非那么契合，但大体的能够这么理解。如今咱们再仔细的看一看redux的数据流。

1 dispatch的action会被reducer捕获到，实际上是action先被传送至store，再由store交付给reducer的，由于dispatch是store的方法，action经过回调到达的store，而以前咱们在建立store的时候使用了这样的声明 var store = createStore（reducer），使得store与reducer创建了某种联系，天然的，reducer可以接收到触发的action。

2 上面是redux内部数据流的实现，可是redux与应用之间的数据流动是怎么创建起来的呢？由于通常来讲，是由应用的视图触发action，而后redux的reducer根据接收到的action执行相应的处理函数更新store的state，而state又是做为数据来源与应用绑定的，因此store的state一更新，应用视图也会同步刷新。因此这里的问题是，应用是如何得到dispatch action的能力以及来自store的数据的呢？这个就须要借助react-redux的Provider以及connect组件了。

经过Provider组件为应用组件再加一层外壳，并传入整个应用的store。

 

connect组件负责连接store与应用。其中select函数会接收到来自store的state，在这里能够对state进行相应的预处理再返回应用所需state，state会连同store的dispatch方法以属性方式传入App组件即应用组件。

 

 

todo项目，说明整个项目的核心思想

redux的数据流思想大体如此，但这只是我本身的理解，可能会有所纰漏。

看了redux官方文档以后，照着葫芦画瓢也实现了一个todo小应用。

 

整个应用的编写思路其实不外乎上面所谈及的那些。

可是须要注意的是，上面截图中的第一条todo实际上是经过异步添加上去的，然而dispatch只能触发同步的action，即传递普通的action对象，由于这样咱们的action才能被reducer所接收到并触发相对应的处理函数。因此，若是须要触发异步的action的话，常规的方法是不行了的，咱们须要使用点小技巧。这里又涉及到redux中间件（middleware）的概念了。简单介绍下，所谓中间件，就是在action被触发以及还没被reducer接收到之间这段时间所执行的一段函数，其内部封装有dispatch方法。中间件的存在是dispatch扩展的惟一标准方式。

咱们想要使用中间件的话，须要借助applyMiddleware方法，它可以使中间件与store创建某种联系，使得store的dispatch和getState方法传入中间件。

说回咱们以前所说的异步action，异步请求的实现咱们能够借助于redux-thunk中间件，这个中间件会去拦截异步action，由于通常状况下异步action是action建立函数所返回的一个函数，因此redux-thunk中间件会替咱们去执行这个函数。执行的最后，通常会dispatch普通的action对象，reducer捕获到此action对象，作出相应。

这是咱们的异步action建立函数,会返回一个异步函数

//异步action
export function asyncAction(){
    return function(dispatch, getState){
        setTimeout(function(){
            dispatch(addTodo("2秒钟过去啦！你还没添加新的任务，我来帮你添加一个吧！"))
        },2000)
    }
};

而后咱们dispatch它

dispatch(asyncAction());

由于返回的是异步action对象（函数），会被redux-thunk拦截并执行，执行的最后dispatch一个普通的action事件，成功添加一条todo。

完整的代码在这里 https://github.com/JerelLin/redux-todo

 

睡觉