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

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

苏南大叔:create-react-app,如何获得一个精简版redux项目? - react-redux-hero
create-react-app,如何获得一个精简版redux项目?(图8-1)

大家好,这里是苏南大叔的碎碎念博客,碎碎念的内容是自己想要的内容。本文初步解析一下,如何通过create-react-app创建使用redux的项目。测试环境:win10node@16.14.2create-react-app@5.0.1reduxjs/toolkit@1.8.3react-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"模版。

苏南大叔:create-react-app,如何获得一个精简版redux项目? - react-redux-code
create-react-app,如何获得一个精简版redux项目?(图8-2)

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

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

npm start

苏南大叔:create-react-app,如何获得一个精简版redux项目? - 运行效果
create-react-app,如何获得一个精简版redux项目?(图8-3)

精简代码【非推荐】

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

文件操作说明
public/*保留index.html,其余删除
public/index.html初始化为最简单的模版保留root的div元素
src/*保留app/ features/ index.js,其余删除
src/app/改名src/logic/待补充
src/features/改名src/view/counter内文件上移一层
src/view/*api.js slice.js移动到 logic/,删除spec.js文件名有所修改

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

苏南大叔:create-react-app,如何获得一个精简版redux项目? - git-log
create-react-app,如何获得一个精简版redux项目?(图8-4)

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

苏南大叔:create-react-app,如何获得一个精简版redux项目? - 精简后的文件结构
create-react-app,如何获得一个精简版redux项目?(图8-5)

核心七文件

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

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

苏南大叔:create-react-app,如何获得一个精简版redux项目? - index-js-code
create-react-app,如何获得一个精简版redux项目?(图8-6)

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

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

苏南大叔:create-react-app,如何获得一个精简版redux项目? - counter-js-code
create-react-app,如何获得一个精简版redux项目?(图8-7)

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

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

苏南大叔:create-react-app,如何获得一个精简版redux项目? - 核心逻辑
create-react-app,如何获得一个精简版redux项目?(图8-8)

相关文档

综述

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

助理微信

微信打赏码

微信公众号

微信小程序

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

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

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

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