redux教程,一个store如何按功能划分多个slice切片?
发布于 作者:苏南大叔 来源:程序如此灵动~

在create-react-app
的redux
模版中,定义了一个store
,然后定义了一个createSlice
。在slice
的结构体里面,有state
的机构和改变的方法。在store
中,有这个state
结构体的名字。故事就是从这里开始的。

大家好,这里是苏南大叔的程序如此灵动博客。这里讲述redux-react
项目中,一个store
对应多个slice
的方式。测试环境:win10
,node@16.14.2
,create-react-app@5.0.1
,reduxjs/toolkit@1.8.3
,react-redux@8.0.2
,chrome@103.0.5060.53
,redux-devtools-extension@3.0.11
。
前情回顾
首先,最基础的redux/toolkit
里面的slice
相关定义。参考文章:
其次,create-react-app
的redux
模版里面的定义方式。参考文章:
slice.js
:

store.js
:
定义多个createSlice
对于不同功能的函数,使用slice
进行分区,就可以划分不同的功能区了。比如:
在定义一个slice-2.js
:

修改store.js
:

调用方法一:普通方法
调用不同的功能的时候,也是一样的方法。
不过基于redux/toolkit
的代码,在运行的时候,都比较特殊。需要使用webpack
类的代码,进行一下包装才能使用。参考文章:
调用方法二:react
中调用
还是create-react-app
的redux
模版例子,counter.js
:

结果截图
调用的结果,在redux-devtools
里面看state
的话,就可以看到,两个不同的slice
里面的state
结果,显示在了一起。

相关文章
综述
更多redux
文章,请点击苏南大叔的博客。


