redux与react-redux入门教程

这两天在研究redux 和react-rudex  记录一下,后续再补充：

redux:

   redux中有几个核心概念：store,state,action,reducer,dispatch，getState，subscribe

1.  store:存储数据的仓库，该仓库返回一个新的state对象，对view进行渲染
2.  state:初始化数据，能够有多个值
3. action:须要变化的数据，是一个对象，必需要有两个参数type,和变化的数据data(key值能够自定义，不必定要是data),在我看来，通俗点说，action就是提供原料和加工方式
4. reducer:是一个函数，接受两个参数，state和action,收到action传递过来的命令，对数据进行加工，返回一个新的state对象出去，通俗点讲，reduce    就是加工输出的地方
5. dispatch：触发数据更新，接受一个action,简单点描述一下过程就是：调用dispatch()方法，告诉他把这些原料和加工方式(action)交给reducer, 再由 reducer加工输出出来
6. getState:获取store仓库的state数据
7. subscribe:更新视图

下面写个小实例，将上面知识串起来，加深理解：

 

逻辑很简单，点击‘+’ ，数字加1，点击‘-’数字减1，下面看看咱们如何实现

目录结构：

入口：

store:

action:

reducer：

组件代码及业务逻辑

 

不知你们发现没有，redux和react创建链接是经过props传值的方式，这样的话redux与react耦合度过高了，因此引出react-redux

在React-redux中有两个比较关键的概念：Provider和connect方法。

通常咱们都将顶层组件包裹在Provider组件之中，这样的话，全部组件就均可以在react-redux的控制之下了,可是store必须做为参数放到Provider组件中去

connect方法：

1.     connect(mapStateToProps, mapDispatchToProps)(MyComponent)

•  mapStateToProps : 字面含义是把state映射到props中去，意思就是把Redux中的数据映射到React中的props中去。        
•  mapDispatchToProps : 就是把各类dispatch也变成了props让你能够直接使用

 

下面咱们基于react-redux来改造一下以前的例子,忘记说了，这是react的一个插件，要先安装  npm install react-redux -S