redux和react-redux做简单组件控制

这次我们用两种方式实现以下要求

1.三个组件

2.第一个组件有两个按钮分别控制第二和第三个组件年龄和姓名的改变

3第二个组件展示姓名，第三个组件展示年龄

用到哪些插件

store redux

一 .新建项目

create-react-app 项目名称

把不必要的东西删掉保持项目目录为这样

然后全局install 两个插件

npm install store 

npm install redux

二.新建组件和盒子

新建三个组件和一个展示组件的盒子

组件：

组件头部先引入需要用到的插件路径要写正确

btn组件：

盒子：

盒子是为了渲染组件的直接放上去就好了注意的是首字母必须大写

还有一步就是需要吧盒子加载到页面上就需要把box 渲染到app里

这个样子我们的准备工作就完成了

三.分析store

我在之前博客中写到过store 工作原理所以在这里我们需要四个文件

store：

维持应用的state；
提供getState()方法获取 state
提供dispatch(action)方法更新 state；
通过subscribe(listener)注册监听器;
通过subscribe(listener)返回的函数注销监听器。

我们可以把整个运行流程想象成图书馆借书的流程

React Component（借书的人）
需要借书的人
Action Creator（具体借书的表达）
想借书的人向图书馆管理员说明要借的书的那句话。
Store（图书馆管理员）
负责整个图书馆的管理。是Redux的核心
Reducers（图书馆管理员的记录本）
管理员需要借助Reducer（图书馆管理员的记录本）来记录。

借书的人（ReactComponent）说了一句话（Action Creator）向图书馆管理员（Store）借一本书，图书馆管理员年纪大了啊记不住啊，便掏出了自己的记录本（Reducers）。看了看知道了那本书有没有，在哪，怎么样。这样一来管理员就拿到了这本书，再把这本书交给了借书人。
翻译过来就是：

组件想要获取store中的数据State，用ActionCreator创建了一个请求交给Store,Store借助Reducer确认了该State的状态，Reducer返回给Store一个结果，Store再把这个State转给组件。

通过这样的理解大概就可以猜测出来文件内部代码的作用

store：

创建一个store 然后将reducer 传给store 然后导出store

actioncreator：

创建一个行为也就是给让component说话去借书具体 store通过dispatch传过来的action识别来确认状态

reducer：

当store接受到action后，Store会自动的把当前store中存储的数据（旧数据）和接受的action一起传给reducer

而reducer需要做的监听state中数据的变化和store传过来的数据进行对比并将新的数据返回

state：

最简单的数据

创建好store后我们就需要在btn组建中加入改变数据的方法

随后再进行修改子组件就完成了

react-redux 与redux的区别

将方法做了个映射不用引用去创建方法可以直接

通过props 调用方法就行了

传参需要bind

导出

用connect

connect()接收四个参数，它们分别是mapStateToProps，mapDispatchToProps，mergeProps和options

这个函数允许我们将store中的数据作为props绑定到组件上。

具体见 https://segmentfault.com/a/1190000015042646 connect用法

随后就是子组件导出方式也需要修改

index.js

更改如上