redux学习系列(二)

82 阅读1分钟

为什么要重构redux代码

在前一篇中我们已经知道如何使用redux了,但还存在一个问题,就是编写redux的代码过于集中,将来代码量一旦上来后,将变得不好维护,所以这篇文章,我们将对redux代码进行重构,使其结构更加清晰明了。

对redux代码进行拆分操作

一、创建constants.js

用来创建一些常量,比如action中的type字符串,可以避免直接写字符串容易拼写错误的问题

image.png

二、创建actionCreators.js

上一篇中派发action时,都是手动写一个对象,进行派发,每次都要写{type: "change_name", name: "kobe"} 太过冗余了

image.png

创建一个专门创建action的函数,来创建action对象

image.png 第1行: 导入 常量

第3行: 创建一个函数创建,用于创建action对象,type用了是导入的常量

第9行: 创建一个函数创建,用于创建action对象,type用了是导入的常量

当再派发action时,写法就是下面这样了:

image.png


三、创建reducer.js

上一篇中的reducer函数,当逻辑判断越来越多时,会越写越大,所以将reducer抽取成一个单独的js文件

image.png


四、创建index.js

我们在index.js中只需要做一件事情,创建store

image.png 第1行: 导入createStore

第2行: 导入reducer函数

第5行: 创建store


总结:

本篇对上一篇中编写redux代码做了一个拆分优化,好处是当redux的代码逻辑变得复杂时,我们的代码逻辑依然可以很清晰,这里我们拆分了4个文件:
index.js
reducer.js
actionCreators.js
constants.js

代码:

gitee.com/wangsn001/r…