调用流程回顾
流程.png
Redux官方图
官方流程图.png
代码结构重新组织
-
About里做的事情很相似
Home和About页面的逻辑很相似.png - 会造成大量重复的代码
- 把公共的代码抽离出去
- 让其他所有的组件都可以共享代码
-
把不一样的代码抽离出去 state/dispatch
image.png - 抽离到一个函数里, utils文件夹中connect.js文件
- 导出这个函数, 这个函数的作用就是讲组件需要依赖的东西连接到一起
- connect函数传过来两个参数, 一般是固定的名字, mapStateToProps, mapDispatchToProps
- 组件抽取高阶函数
- store.getSate() -> 获取所有的状态, 不需要, 整个组件都需要刷新
- 把connect文件封装成一个库
-
上传到npm上面, 需要代码足够独立, 不应该对业务逻辑有任何的依赖, 现在有依赖store
image.png -
基本封装, 目的是组件里用到的redux相关的东西, 做一个映射(connect context)
做一个映射.png
第三方库react-redux
封装好了
和React结合会好一点
终端
yarn add react-redux添加完之后, 来到index.js里面,
import { Provider } from 'react-redux';Provider传入的不是一个value属性, 内部做了一些变换, 为了更清晰一点, 传入store
react-redux直接使用可能理解不深, 通过记忆, 很可能会忘, 自己实现一下, 加深理解.
React退出hooks之后, 社区慢慢转向hooks, 类组件、生命周期用的比较少了, 直接用不好理解, 还有大量的项目, 如AntDesign还用了很多类组件.
modules里面看一下源码
-
导出的东西都在index.js里面
image.png -
Provider, 本质上是一个函数式组件, 要求传入一个store
要求传入store.png -
为了调用的时候可以传一个空的东西, 给了一个默认值
ES6的语法.png 大量的用到了Hooks的东西.
组件中异步操作
- 在之前简单的案例中, redux中保存的counter是一个本地定义的数据
- 我们可以通过直接通过同步的操作来dispatch action, state就会被立即更新.
- 但是真实开发中, redux中保存的很多数据可能来自服务器, 我们需要进行异步的请求, 再将数据保存到redux中.
-
网络请求可以在class组件的componentDidMount中发送, 所以我们可以有这样的结构:
image.png - 接口
-
reducer.js中设计state, 包含的数据
ES6语法, 两个东西一样可省略.png - 函数式组件没有this
- 要不要把所有的状态放到redux里面? 官方有解释
Redux中的异步操作
- 上面的代码有一个缺陷:
- 我们必须将网络请求的异步代码放到组件的生命周期中来完成;
-
事实上, 网络请求到的数据也属于我们状态管理的一部分, 更好的一种方式应该是将其也交给redux来管理;
image.png
-
-
默认redux没有异步请求
中间件Middleware.png
理解中间件
redux也引入了中间件的概念:
- 这个中间件的目的实在dispatch的action和最终达到reducer之间, 扩展一些自己的代码;
-
比如日志记录、调用一部接口、添加代码调试功能等等
redux-thunk.png
-
-
redux-thunk如何做到让我们可以发送异步的请求?
image.png
如何使用redux-thunk
- 引入
yarn add redux-thunk - 软件系统里都有中间件的概念, 高阶组件或高阶函数也能理解成中间件
