首页 > 其他分享 ># react 使用 redux 状态管理器

# react 使用 redux 状态管理器

时间:2022-09-27 15:02:23浏览次数:75  
标签:异步 管理器 value react Action const redux store

react 使用 redux 状态管理器

学习资料

英文文档https://redux.js.org/

中文文档http://www.redux.org.cn/

Github地址https://github.com/reactjs/redux

在这里插入图片描述

是什么 redux 状态管理器

  • redux 是一个专门用来做状态管理的JS库,他独立与 React。
  • 它可以用在React、Angular、Vue等项目中, 但常被用来与 React 配合使用。

作用: 集中式管理 React 应用中多个组件共享的状态,就像是 Vue 项目中的 Vuex。

什么时候需要使用 redux

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

redux 原理图

在这里插入图片描述

redux 三大核心概念

action

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

reducer

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

store

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

最简单的 redux 案例

接下来我们写一个最简单的 redux 案例。

首先得安装哈!

npm install redux

接下来开始编写案例:

我们有一个页面,求和 操作。页面显示当前求和的值,默认最开始是 0 ,有一个下拉框,选择要加的数,下面有四个按钮,单击“加”数据加选择的数,点击“减”数据减选择的数,单击“和为基数加”当和为基数的时候加选择的数,单击“异步加”延时500毫秒后加选择的数。具体效果就像下面效果图一样。

在这里插入图片描述

好了, 我们先不使用 redux ,使用组件自己的状态 state 进行维护数据,实现一下这个效果。

因为是组件,所以说呢,我们直接创建一个 Count 然后在他自己内部实现一下这个效果。

import React, { Component } from 'react'

export default class Count extends Component {

  state = { count: 0 }

  // 加法
  increment = () => {
    const { value } = this.selectNumber
    const { count } = this.state
    this.setState({ count: count + value * 1 })
  }

  // 减法
  decrement = () => {
    const { value } = this.selectNumber
    const { count } = this.state
    this.setState({ count: count - value * 1 })
  }

  // 奇数再加
  incrementIfOdd = () => {
    const { value } = this.selectNumber
    const { count } = this.state
    if (count % 2 !== 0) {
      this.setState({ count: count + value * 1 })
    }
  }

  // 异步相加
  incrementAsync = () => {
    const { value } = this.selectNumber
    const { count } = this.state
    setTimeout(() => {
      this.setState({ count: count + value * 1 })
    }, 500)
  }

  render() {
    return (
      <div>
        <h1>我是

标签:异步,管理器,value,react,Action,const,redux,store
From: https://www.cnblogs.com/wjw1014/p/16734562.html

相关文章

  • 一份react面试题总结
    React中constructor和getInitialState的区别?两者都是用来初始化state的。前者是ES6中的语法,后者是ES5中的语法,新版本的React中已经废弃了该方法。getInitialState是ES5......
  • 2022 年你必须使用的 5 个令人惊讶的 React 工具:
    2022年你必须使用的5个令人惊讶的React工具:我们确实看到了一些最好的React开发工具。事实上,这使得开发人员几乎不可能选择他们最好的工具。尽管如此,开发人员应该......
  • ajax 和 react 最显着的区别是什么?
    ajax和react最显着的区别是什么?What’sthemostremarkabledifferencebetweenajaxandreact?目前,Ajax和React之间最大的区别之一是它们是帮助不同网页或应用......
  • React 组件的生命周期
    生命周期(旧)组件的生命周期可分成三个状态:Mounting(挂载):已插入真实DOMUpdating(更新):正在被重新渲染Unmounting(卸载):已移出真实DOM挂载阶段:ReactDOM.render()......
  • day02 cookie管理器
    1、添加默认请求头2、配置好http请求:get请求和路径/cookie/set,添加参数:uesr:uesername3、添加配置元件-cookie管理器4、添加结果树5、提交请求,查看结果树,get请求体里面,......
  • React创建虚拟DOM的两种方式
    1、使用jsx创建虚拟DOM<body><!--准备一个容器--><divid="test"></div><!--引入react核心库,需要在react-dom文件之前引入--><scripttype="tex......
  • 使用 Windows 包管理器 (winget) 安装 .Net
    用户可以在Windows10和Windows11计算机上使用winget命令行工具来发现、安装、升级、删除和配置应用程序。此工具是Windows程序包管理器服务的客户端接口。......
  • 简单记录-react学习,用函数式组件写井字棋
    React官方给定的教程,井字棋(tic-tac-toe),是使用class组件制作的,但是函数式组件才是未来,所以初学者的我用函数式组件重写一遍,简单记录一下。官方教程链接importReact,{u......
  • 我如何在 React 中使用条件渲染
    我如何在React中使用条件渲染如果使用得当,条件渲染是一个非常有用的React概念。您可以根据是否满足某些条件来决定要渲染哪些组件,或者可能完全忽略一个组件。我将举例......
  • React-Native 中关于 useEffect 钩子的完整指南
    React-Native中关于useEffect钩子的完整指南本指南将提供有关react-native中useEffect挂钩的完整信息。同样的概念也可以应用于反应。在React-Native应用程序......