在React项目中使用redux进行组件通信

因个人开发react项目需求，需要使用redux进行组件component之间的通信传值，现在redux学习记录如下：

redux 组件通信原理如图所示。

                                     

从UI开始，通过用户的某种操作触发不同的Actions响应，不同的Actions有自己的type（可以当作唯一标识符），还可以定义一些可传入的参数。然而，Action只是概念层面上的响应，并没有实际可执行的代码，它会依据自身的type被派发（dispatch）到不同的Reducer中，而在Reducer中，将会对action传入的参数，以及state进行一系列的操作（对Action操作的实现），然后，Reducer处理完的state会存储在store中，UI可以通过连接redux来获取store中的数据，从而达到组件通信的目的。

  另外，这只是简单通信原理图，更加专业详细的介绍可以参考一下链接（https://www.cnblogs.com/wilber2013/p/5403350.html，这里原理写得很好很详细，我就不搬运过来了）。

废话不多说，之间上代码。（这里讲一下我的具体需求，组件LayerSearch中从后端数据库查找到了一些layer的id，需要在用户点击某个layer时将该layer的id传递给组件LayeInfo，将图层的具体信息展示出来。）

在项目中引入redux，react-redux和redux-persist（此处使用淘宝镜像cnpm安装，如果之前项目依赖是通过npm引入的话，此处换成npm也没有问题）

cnpm install redux --save;

cnpm install react-redux --save;

cnpm install redux-persist --save;

接着在src目录中创建一个redux的文件夹，里面写包含action.js和reducer.js文件。

                                                                            

action.tsx 文件