create-react-app的redux范例,解说store、slice、reducer
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
本文接着看看create-react-app
的redux
模版项目,在上一篇文章中已经把代码进行了精简,删除了干扰实现的代码。剩下了redux
相关的代码。那么,这些代码是怎么组织起来的呢?和reduxjs/toolkit
代码有什么联系呢?这就是本文要描述的问题。
大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文进一步描述reduxjs/toolkit
的slice
概念和store
的概念。测试环境:win10
,node@16.14.2
,create-react-app@5.0.1
,reduxjs/toolkit@1.8.3
,react-redux@8.0.2
。
基本代码
本文就基于create-react-app
的redux
模版的,可以通过下面的方式获得:
create-react-app my-app --template redux
精简代码的过程及标准,可以参考文章:
精简过后,获得的redux
代码,是基于reduxjs/toolkit
的。关于这部分内容,请参考文章:
redux
的核心内容就两个,type
和state
,所有的函数都是围绕着这两个来的。
代码解说slice
基于reduxjs/toolkit
的概念,
- 各种数据操作的函数,需要形成一个
reducers
,放置在slice
里面。 - 原始
redux
的必要组成部分action.type
,由slice.name
+"/"+reducer.name
自动组成,已经淡化这个概念了。 reducers
会返回两个对象,一个是.reducer
用于构建store
。另外一个是.actions
,用于外部调用dispatch
。
在slice.js
中,还有几个额外的概念,暂时不做本文的介绍范围内。
代码解说store
需要一个reducer
对象来创建一个store
对象。
注意:
- 这里构建
store
时的reducer
的命名【counter】
,决定了state
数据的命名空间。后续的数据,都是通过state.counter.xxx
访问的,而不是slice
里面的name
所决定的。 slice
里面的name
,决定的是定义在slice
内的reducers
里面的reducer
自动生成的type
。slice.name
+reducer.function_name
。- 并不是所有的
reducer
的name
,都遵守slice
的name
。因为有的reducer
是外部定义的,它的type
是自己输入的,而不是自动生成的。比如本例子中的incrementAsync()
。
基于redux-react
的概念,需要Provider
加载store
,然后包裹在相关组件counter
外侧。
相关文章
本文中涉及到了es6
模块中的export
和import
的基本概念,可以参考文章:
其它相关文章:
综述
本文主要是进一步描述reduxjs/toolkit
中的slice
的概念。更多redux
的经验文章,请点击:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。