简单而又详细的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项目就这样愉快的写好了。匆忙写完了这篇文章,很简陋,我觉得肯定还有漏洞和逻辑方面的错误,如果大家对这篇文章有什么疑问或者不同意的地方请留言给我指出,谢谢。

猜你喜欢

转载自blog.csdn.net/qq_35430000/article/details/79898486