create-react-app，如何获得一个精简版redux项目？

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

本文讲述redux的第三个例子，和react项目协同作用。还是通过create-react-app这个脚手架工具，来快速搭建使用redux的react项目。redux官方也说了，redux和react并不是相互绑定到一起的，两者可以独立使用。第三个redux例子，就是写的redux如何和react结合使用。

大家好，这里是苏南大叔的碎碎念博客，碎碎念的内容是自己想要的内容。本文初步解析一下，如何通过create-react-app创建使用redux的项目。测试环境：win10，node@16.14.2，create-react-app@5.0.1，reduxjs/toolkit@1.8.3，react-redux@8.0.2。

安装redux普通模版

create-react-app是全局安装的，安装命令：

npm i create-react-app -g

如果使用redux的普通模版的话，使用方式是：

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

因为还有个TS版本的redux模版，所以苏南大叔说这里是个"普通redux"模版。

顺利执行后，就得到了第三个redux使用范例。这个例子就相对复杂的多了，只有读懂了前两个例子，才能更好的理解本文中的第三个例子。所以，可以参考文章：

• 第一个例子， https://newsn.net/say/redux.html
• 第二个例子，https://newsn.net/say/redux-toolkit.html

如果初始化过程中，碰到了git commit note created的相关错误，解决方案可以参考：

• https://newsn.net/say/git-commit-not-created.html

一切准备就绪了的话，按下面的命令启动项目：

npm start

精简代码【非推荐】

官方做这个例子，是有它们自己的理由的。但是，为了更好的读懂这个例子，苏南大叔对这个代码进行了精简。关于原版的create-react-app的默认模版，可以参考下面的例子说明：

• https://newsn.net/say/react-component.html

上述操作，建议在编辑器里面修改，以便能够自动修改逻辑调用关系。

精简的效果，只是为了更好的理解redux和react结合的逻辑。精简的原则是保留redux的核心部分，最终的精简结果是这样的：

核心七文件

这里仅仅做个初步的解读，详细的内容会在后续说明。

• public/index.html就是个最简单的带root容器的模版，一点研究价值都没有。
• src/index.js是配套的.js代码。原版的引入的是app.js，现在直接引入./view/counter.js，省去了一个app.js的环节。
• 有关reportWebVitals的代码全部删除，以后再说这个文件的作用，目前就是个影响视线的效果。

src/view/目录下面就两个文件，

• counter.js，用于控制范例的html虚拟节点。
• cnt.module.css，用于控制范例的样式。值得注意的是，这个文件命名必须以.module.css结尾，否则css模块规则失效。（在webpack.config.js里面写死了相关代码）

src/logic目录下面的文件，有三个。

• slice.js，先定义reducer那些可供调用的函数。
• store.js，就是调用redux/toolkit提供store那些套路，但是要引入reducer。
• api.js，仅仅是为了解释redux里面的一个延迟加载功能做的假函数。

相关文档

• https://newsn.net/say/redux.html
• https://newsn.net/say/redux-toolkit.html
• https://newsn.net/say/git-commit-not-created.html

综述

由于篇幅有限，这里就介绍这么多内容。如何初始化带redux的react项目，以及被精简过的仅剩redux相关核心内容的七个文件。名字有所修改，但是和原版相比的话，还是可以看出来的。

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

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