我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文接着看看create-react-appredux模版项目,在上一篇文章中已经把代码进行了精简,删除了干扰实现的代码。剩下了redux相关的代码。那么,这些代码是怎么组织起来的呢?和reduxjs/toolkit代码有什么联系呢?这就是本文要描述的问题。

苏南大叔:create-react-app的redux范例,解说store、slice、reducer - redux-slice-code
create-react-app的redux范例,解说store、slice、reducer(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文进一步描述reduxjs/toolkitslice概念和store的概念。测试环境:win10node@16.14.2create-react-app@5.0.1reduxjs/toolkit@1.8.3react-redux@8.0.2

基本代码

本文就基于create-react-appredux模版的,可以通过下面的方式获得:

create-react-app my-app --template redux

精简代码的过程及标准,可以参考文章:

精简过后,获得的redux代码,是基于reduxjs/toolkit的。关于这部分内容,请参考文章:

苏南大叔:create-react-app的redux范例,解说store、slice、reducer - 目录结构
create-react-app的redux范例,解说store、slice、reducer(图5-2)

redux的核心内容就两个,typestate,所有的函数都是围绕着这两个来的。

代码解说slice

基于reduxjs/toolkit的概念,

  • 各种数据操作的函数,需要形成一个reducers,放置在slice里面。
  • 原始redux的必要组成部分action.type,由slice.name+"/"+reducer.name自动组成,已经淡化这个概念了。
  • reducers会返回两个对象,一个是.reducer用于构建store。另外一个是.actions,用于外部调用dispatch

苏南大叔:create-react-app的redux范例,解说store、slice、reducer - slice代码结构
create-react-app的redux范例,解说store、slice、reducer(图5-3)

slice.js中,还有几个额外的概念,暂时不做本文的介绍范围内。

代码解说store

需要一个reducer对象来创建一个store对象。

苏南大叔:create-react-app的redux范例,解说store、slice、reducer - store-slice
create-react-app的redux范例,解说store、slice、reducer(图5-4)

注意:

  • 这里构建store时的reducer的命名【counter】,决定了state数据的命名空间。后续的数据,都是通过state.counter.xxx访问的,而不是slice里面的name所决定的。
  • slice里面的name,决定的是定义在slice内的reducers里面的reducer自动生成的typeslice.name+reducer.function_name
  • 并不是所有的reducername,都遵守slicename。因为有的reducer是外部定义的,它的type是自己输入的,而不是自动生成的。比如本例子中的incrementAsync()

基于redux-react的概念,需要Provider加载store,然后包裹在相关组件counter外侧。

苏南大叔:create-react-app的redux范例,解说store、slice、reducer - provider-store
create-react-app的redux范例,解说store、slice、reducer(图5-5)

相关文章

本文中涉及到了es6模块中的exportimport的基本概念,可以参考文章:

其它相关文章:

综述

本文主要是进一步描述reduxjs/toolkit中的slice的概念。更多redux的经验文章,请点击:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react    redux