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

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

• https://newsn.net/say/create-react-app-redux.html

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

• https://newsn.net/say/redux-toolkit.html

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的基本概念，可以参考文章：

• https://newsn.net/say/es6-module.html

其它相关文章：

• https://newsn.net/say/create-react-app-redux.html
• https://newsn.net/say/redux-toolkit.html

综述

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

• https://newsn.net/tag/redux/

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