redux简单实用实例

公司今年下半年的项目用到了react作为技术栈，在使用的过程中我发现它本身学习并不难，难得是当一个项目复杂的时候，只是单纯的父子组件通信并不是很便捷，所以我在项目中引入了redux模块，然后一直没时间进行一个归纳，所以今天就特意做了一个demo，用来小小的总结一下，以后学习起来，也有东西可以翻阅。

首先说下什么是redux

官方的解释是redux是js应用的可预测状态的容器，可以理解为全局数据状态管理工具，通常我们需要坐组件通信的时候会需要用到，如果只是简单的父组件往子组件传值可使用props进行传值，但如果想要数据共享或者复杂的通信，可借助redux

1：首先创建react实例

2：my-app应用创建以后，安装redux

npm install redux react-redux --save

3：在src目录下创建action跟reducers，store三个目录，在action目录下创建num.js文件，action主要用来描述某个行为，比如，本文中会有加减乘除等行为，store中的state数据只能通过action来改变，下图是本文中自定义的action，可以看出我们一共定义了加减乘除四种行为，分别对应四种方法，这四种方法又有自己各自的type

 4：reducers文件夹下创建add.js,如果说action是用来描述某个行为的话，那reducer就是针对某种行为来进行具体的操作的，操作的对象是state，而判断是某种行为的标准就是action的type值，针对不同的type来做出不同的处理

一般情况下我们不止会有一个reducer文件，比如我们还希望对别的数据进行共享，不是按钮的加减乘除，那我们就需要有别的actions,reducers,那如果有多个reducer文件该怎么办呢，那我们可以在reducers文件夹下再创建一个index.js文件，将多个reducer文件合并成一个文件再进行输出，主要用到的是redux中的combineReducers

5：目前而言，action跟reducer已经准备完毕，下面就是生成store,在上面说的store文件夹下创建index.js，在该文件里就是把redux模块下的createStore引入，把输出总的reducer文件引入，最后通过createStore生成store，参数就是前面生成的总的reducer，然后暴露store，供给组件使用

6：一切准备完毕，开始使用，在index.js中引入store,provider,其中provider是react-redux提供的一个组件，它的作用是将store提供给其子组件，如下图，其子组件App就可以拿到store

7：在组件中如何使用呢,首先在这里需要引入想要用的action,最终我们需要通过getdispatch某个action来改变某个state,gemapStateToProps和mapDispatchToProps主要就是将state跟dispatch都跟当前组件的props关联，供组件使用，但是这两个方法的名称不是固定的，分别对应本文中的getstate,getdispatch，然后getstate可以拿到你想要的state，gedispatch就是用来dispatch一个action，来达到最终的目的

8：界面截图