redux基础使用步骤详解

redux和vuex一样,都是公共的状态管理器,可以往里面设置值,在不同的页面直接调用redux仓库里 的数据,不需要父子间或者组件之间来回传值
1.首先放个流程图

2.在react框架的入口文件写一个页面 ,实现点击添加按钮 把input框的值传进redux的仓库store中,并在输入框下面显示出来,
详情代码请看github:https://github.com/MrGuoHaoJie/Test/tree/master/redux

第一步: action动作页面,通过按钮调用tap函数的stroe.dispatch方法,往仓库里面\设置值, 此时没有仓库,就要走第二步.
第二步:在stroe.js页面引入redux中的createStore的方法,创建数据仓库,仓库里面每个数据都要占据不同的格子,需要走第三步Reducers页面,可是没有啊,自己创建
第三步:创建ToDoReducers.js来定义自己的仓库里面的小格子,定义存放对象(数据类型,数据)如果没有数据,放回一个空数组,有数据的话用switch循环返回定义的不同数据
第四部:在html页面实时显示添加的数据,用componentDidMount()生命周期函数调用仓库store的监听方法,监听设置数据的函数,
下面附上代码片端,一步一个片段

 // 点击添加输入框里的数据
		tap(){
        // 1.调用仓库固有的方法,这时需要去创建仓库store
       Store.dispatch(Action(this.refs.ipt.value))