Day16. Redux融入React代码

调用流程回顾

流程.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

• 封装好了

• Redux官网

• 和React结合会好一点

• GitHub地址

• 终端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
• 软件系统里都有中间件的概念, 高阶组件或高阶函数也能理解成中间件