ES6+redux实现Counter

react说白了就是用jsx开发一个view层的东西，若是你要想开发一些web端的网页应用，你须要作的就是结合起目前能够管理数据端的一些应用，今天咱们说到的是redux，redux我目前学习的也不是很深，先后差很少10天时间，只谈一下本身的理解！

网络上有不少关于redux的讲解，目前以为阮一峰大神的最适合入门者初学，http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

redux是经过什么样的方式管理数据？组件之间怎么实现通讯？怎么实现单向数据流？

大致上的redux的过程就分为三步：

1.用户触发了事件，action发送一个state到reducer里面去

2.reducer根据action+state而后生成新的state

3.新state经过属性显示到view层上面

 

下面讲的仔细一点：

1.首先是咱们为何要用redux?何时用？何时能够不用?
其实大部分的状况咱们均可以不用使用redux的，若是嵌套的层次不高，交互性也不高，具体的能够在阮一峰的学习笔记上面看到，网址在最上面

2.既然咱们用了redux，redux具体有哪些好处？

redux实现的最大的好处就是他可让每一种state对应一种view，这样能够实现记忆功能，并且数据便于管理

3.怎么使用redux？
咱们借助redux文件夹下面examples里面的real-world例子文件目录去看一下

实际上咱们最好的是新建action,由于你能够先肯定有哪些功能并且是不和其余文件起冲突的，不依赖其余的文件，新建文件夹顺序

action(constants,middleware)——>reducers——>store——>comonents——>containers——>index.js

containers文件通常是须要输入一个容器组件，而后咱们在index.js中经过Provider方法把store注入到容器组件，

因此containers中的组件是须要被connect方法处理过的，被connect方法处理过的UI组件会变成容器组件

4.咱们再具体说一下怎么去操做？

从action提及，action里面咱们首先要 export const ADD_TODO="ADD_TODO"

这边有两个问题，为何要用const定义，在ES6中定义有额外的两种方法，let和const的区别在于，const申明的变量须要在声明的时候必须赋值并且后面不能够任意修改，修改会报错，那么ok，咱们为何要用变量去替换字符串？为了在使用的时候不出错，咱们最好用变量替换掉。

结束了定义变量的部分那么咱们须要写什么呢？

固然是actionCreators,咱们定义一种view对应一种state,那么生成这一种state咱们固然得用一种action，一种action表明的是一种功能，写法以下：

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

很明显,一旦咱们调用函数会返回一个包含type的对象，text是什么？当前是咱们要操做的数据啦！action对reducer说，我这种type你须要做出的回应是删除数据，reducer说你要把数据给我啊，text就是这个

constants通常储存的是咱们的字符串到变量的替换过程，咱们能够用 import * as types from "地址"所有调用过来而后咱们再用types.ADD_TODO调用其中的一个也是能够的，固然咱们用import{ADD_TODO} from "地址"调用也是能够的对吧！

middleware是个什么东西呢？中间件的使用以及异步的操做过程能够详见阮一峰的第二篇文章，最上面的网址

那么text怎么到action里面的？咱们后面说

那么咱们的action已经写完了，接下来咱们须要写reducers，什么是reducers，是纯函数，是一种接受咱们的state和action能够生成新state的东西，说白了action只发布命令，作事的就是reducer，那么咱们应用的reducers愈来愈多的时候咱们能够把他们拆分开来，为何咱们能够拆分？由于每种功能之间互不影响，你干你的，我干个人，互不影响，ok,咱们怎么拆分？直接把大函数拆分红小函数，每个小函数负责一个状态的实现。而后咱们用combineReducers去吧全部的reducer合并起来生成一个大的。

若是是两个以上的reducer，咱们能够直接combineReducers({todo1,todo2,todo3}),es6的写法

好吧，咱们写好了action和reducer文档，下面应该写store了，store的话引入reducer便可

const store = createStore(reducers),export default store这样就能够了？固然不是，咱们要看看是否是有第二个参数，第二个参数initialstate是state的初始值，通常状况只须要将reducer的数据更新拿过来，没有的话就使用初始值。

那么好的怎么将数据拿来?

store提供三种方法，分别是getState(获取当前state),subscribe(监听state变化)，dispatch(分发action)

那么咱们如今已经处理好actions,reducers,stores，下面咱们应该写的是components

component通常写的是咱们的UI组件，是咱们在view上面能够看到的东西，好的，那么咱们如今要在view上面看到的具备变化性质的东西应该怎么去传入属性值呢？
如今就应该用到了connect和Provide了，react-redux里面的这两种方法可让全部的组件成功的使用咱们传入的state对象，

咱们须要作的就是使用connect让最外层的组件变成容器组件，而后使用Provider传入store，让全部的子组件可使用到state对象

，connect中有四种方法，这边只说两种，分别是mapDispatchToProps和mapStateToProps，后者是创建state到props的映射，让UI组件可使用容器组件中传入的属性值

传入的todos我能够能够直接在UI组件内调用，至关于咱们传入了一个属性名称是todos,mapStateToProps还能够监听state的变化，能够理解为getState和subscribe功能的集合体！

mapDispatchToProps是创建起UI组件的参数到actions的映射（到store.dispatch方法的映射）

基础的东西都说完了，index.js后续用webpack打包一下就能够了,今天先说到这吧！0.0