为什么要重构redux代码
在前一篇中我们已经知道如何使用redux了,但还存在一个问题,就是编写redux的代码过于集中,将来代码量一旦上来后,将变得不好维护,所以这篇文章,我们将对redux代码进行重构,使其结构更加清晰明了。
对redux代码进行拆分操作
一、创建constants.js
用来创建一些常量,比如action中的type字符串,可以避免直接写字符串容易拼写错误的问题
二、创建actionCreators.js
上一篇中派发action时,都是手动写一个对象,进行派发,每次都要写{type: "change_name", name: "kobe"} 太过冗余了
创建一个专门创建action的函数,来创建action对象
第1行: 导入 常量
第3行: 创建一个函数创建,用于创建action对象,type用了是导入的常量
第9行: 创建一个函数创建,用于创建action对象,type用了是导入的常量
当再派发action时,写法就是下面这样了:
三、创建reducer.js
上一篇中的reducer函数,当逻辑判断越来越多时,会越写越大,所以将reducer抽取成一个单独的js文件
四、创建index.js
我们在index.js中只需要做一件事情,创建store
第1行: 导入createStore
第2行: 导入reducer函数
第5行: 创建store
总结:
本篇对上一篇中编写redux代码做了一个拆分优化,好处是当redux的代码逻辑变得复杂时,我们的代码逻辑依然可以很清晰,这里我们拆分了4个文件:
index.js
reducer.js
actionCreators.js
constants.js