React学习计划-React16--React基础(七)redux使用与介绍

2023-12-27 10:31:27

笔记gitee地址

一、redux是什么

  1. redux是一个专门用于做状态管理js库(不是react插件库)
  2. 它可以用在reactangularvue的项目中,但基本与react配合使用
  3. 作用:集中式管理react应用中多个组件共享的状态

二、什么情况下需要使用redux

  1. 某个组件的状态,需要让其他组件可以随时拿到(共享)
  2. 一个组件需要改变另一个组件的状态(通信)
  3. 总体原则:能不用就不用,如果不用比较吃力才考虑使用

三、redux 工作流程

在这里插入图片描述

四、redux的三个核心概念

  1. action

    1. 动作对象
    2. 包含2个属性
      • type: 标识属性,值为字符串,唯一,必要属性
      • data: 数据属性,值类型任意,可选类型
    3. 例子:{ type: 'increment', data: 1}
  2. reducer

    1. 用于初始化状态、加工状态
    2. 加工时,根据旧的stateaction,产生新的state的纯函数
  3. store

    1. state、action、reducer联系在一起的对象
    2. 如何得到此对象?
      1. import { createStore } from 'redux'
      2. import reducer from './reducer'
      3. const store = createStore(reducer)
    3. 此对象的功能?
      1. getState(): 得到state
      2. dispatch(action): 分发action,触发reducer调用,产生新的state
      3. subscript(listener): 注册监听,当产生了新的state时,自动调用

五、案例(先看一个求和案例纯react版,在根据Redux版去做对比)

0. 求和案例纯react

在这里插入图片描述

1. 求和案例_redux精简版

  1. 去除Count组件的自身状态
  2. src下建立:
  -redux
    -store.js
    -count_reducer.js
  1. store.js
    1. 引入redux中的createStore函数,创建一个store
    2. createStore调用时要传入一个为其服务的reducer
    3. 记得暴露store对象
  2. count_reducer.js
    1. reducer的本质是一个函数,接收: preState,action,返回加工后的状态
    2. reducer有两个作用,初始化状态、加工状态
    3. reducer被第一次调用时,是store自动触发的,
      传递的preStateundefined,传递的action{type:'@@redux/INITu ...'}
  3. index.js中检测store中状态的改变,一旦发生改变重新渲染<App/>

备注:redux只负责管理状态,至于状态的改变驱动页面的展示,要靠我们自己写

示例
1. 目录
在这里插入图片描述
2. store.js文件:该文件专门用于暴露一个store对象,整个应用只有一个store对象
在这里插入图片描述
3. count_reducer.js文件

  1. 该文件用于创建一个为Count组件服务的reducer,reducer的本质就是一个函数
  2. reducer函数会接收两个参数,分别为:之前的状态(preState),动作对象(action)

在这里插入图片描述
4. Count.jsx组件
在这里插入图片描述

2. 求和案例_redux完整版

新增文件:

  1. count_action.js 专门用于创建action对象
  2. constant.js 放置容易写错的type值,方便管理
    示例
    1. 目录
      在这里插入图片描述
    2. constant.js: 该模块是用于定义action对象中type类型的常量值
      在这里插入图片描述
    3. count_action.js:该文件专门为count组件生成action对象,目的只有一个:便于管理的同时防止程序员单词写错
      在这里插入图片描述
    4. count_reducer.js引用常量
      在这里插入图片描述
    5. Count.jsx组件:

    监测redux中状态的变化,只要变化,就调用render

    在这里插入图片描述
    6. index.js
    在这里插入图片描述

3. 求和案例_redux异步action版本

  1. 明确:延迟的动作不想交给组件自身,想交给action
  2. 何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回
  3. 具体编码:
    1. yarn add redux-thunk, 并配置在store
    2. 创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务
    3. 异步任务有结果后,分发一个同步action去真正操作数据
  4. 备注: 异步action不是必须要写的,完全可以自己等待异步任务的结果然后再去分发同步action
    示例
    1. count_action.js:
      在这里插入图片描述

    2. store.js引入三方库,用于支持异步操作
      在这里插入图片描述

    3. Count.jsx

       // 延时加
        incrementAsync = ()=>{
          const { value } = this.selectNumber
          // 不在组件内部做异步处理
          // setTimeout(()=>{
          //   store.dispatch(createIncrementAction(value * 1))
          // }, 500)
          // 直接调取redux的异步操作
          store.dispatch(createIncrementAsyncAction(value * 1, 500))
        }
    

文章来源:https://blog.csdn.net/qq_35940731/article/details/135236554
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。