简单而又详细的react+reactRouter+redux项目

看了网上的很多关于reactRouter和redux的文章，感觉自己理解的都很乱，众说纷纭，不知道从何下手，其实我就是想要一套开发项目的模板，就这么简单。看了挺多文章，所以现在做了些总结。

一、构建项目

为了让我们的项目更加简单，所以使用官方提供的react-create-app这套脚手架工具构建我们的项目，这里创建的具体步骤我就不具体阐述，可以参考我这篇文章https://blog.csdn.net/qq_35430000/article/details/79800461，构建过程还是很简单的。

二、目录结构

看了网上的挺多文章，提倡按角色组织、按功能组织、又按混合组织我们的目录结构，一层嵌套一层，虽然结构是挺规整的，但是增加了我们的开发难度，心想我这项目又不是太大型，引入一个css文件，要深入好几层去引用，效率可能不是太高。总之，适合自己的就是最好的，所以我对项目结构进行了下整理。

三、index.html和index.js入口文件

index.html只有一个id为root的容器，这个root就是整个项目的父容器，所有页面都会包裹在里面。

index.js文件

路由这块就不做着重去讲，按照上图的配置，路由应该是能够实现的，如果要进一步了解请查阅相关文档。

三、redux的实现

了解过vuex的同学再来学redux可能会觉得无从下手，个人觉得redux要比vuex要难以理解，但他们的功能都是一样的，就是共同维护一个公共的状态，一个地方改变了，其他引用到这个state的地方也会跟着改变。

下面用最简单的 加和减的例子讲解redux的用法：

首先功能呢是这样的,默认count是0，在increase加法页面，每点击一次按钮进行+2的操作，当然这个2是通过参数传递的。参数可以是字符串、对象等，现在举例是一个数字。在decrease减法页面，点击一次按钮会进行 -1的操作，这个1也是通过参数传递的。因为维护的state中的count初始化 0，所以这两个页面目前count的状态都是0，如果在加法页面进行+2的操作，那么无疑，在减法页面，就是显示 2这个数字，这就是需要redux的原因，一个地方改变了state,其他地方引用的也需要改变。

    

具体实现：

（1）首先看一下redux的流程（自己画的图有点丑，多包涵，大概意思就是这样）

（2）先看第一步，也就是view页面，就是加和减这两个页面

mapStateToProps（对应数据）和mapDispatchToProps（对应一些动作）就像react给我们提供的语法糖，把一些复杂的操作帮我们封装好了。Decrease减法页面和上面是一样的，就不列举。

（3）Action

type字段是不能缺少的，用于在Reducer中区分要做什么事情，加或者减，加多少，减多少等

（4）Reducer

（5）创建state，通过Provider使得所有的组件和页面共享state，形成一个闭环的操作

最后：查阅了挺多资料，结合vuex的步骤，一个简单而又详细的react+reactRouter+redux项目就这样愉快的写好了。匆忙写完了这篇文章，很简陋，我觉得肯定还有漏洞和逻辑方面的错误，如果大家对这篇文章有什么疑问或者不同意的地方请留言给我指出，谢谢。