React笔记（八）Redux

news2025/1/24 11:37:15

一、安装和配置

React 官方并没有提供对应的状态机插件，因此，我们需要下载第三方的状态机插件 —— Redux。

1、下载Redux

在终端中定位到项目根目录，然后执行以下命令下载 Redux

npm i redux

2、创建配置文件

在 React 中，不会自动生成状态机的相关配置代码，因此，需要我们自己手动去创建目录以及配置文件。

我们可以在 src 的目录中创建一个 redux 或 store 的目录，用来存放所有关于状态机的配置文件。然后，在该目录中创建一个 store.js 文件，作为整个状态机的入口文件。

3、配置状态机

3.1、创建store仓库对象
import {legacy_createStore as createStore} from 'redux'
const store=createStore();
3.2、保存数据到store中

createStore 方法接收一个函数作为参数，该函数的返回值，会保存到 store 仓库中

const store = createStore((state = 数据初始值) => {
    return state;
});

通过函数参数的默认值的方式，来设置仓库数据的初始值

3.3、查看仓库数据

在 store 仓库对象身上，提供了一个 getState() 方法，用来查看仓库中的所有数据：

console.log(store.getState());

由于目前没有任何文件中在引入状态机的配置文件，如果我们需要查看仓库中的数据，暂时需要在 index.js 中引入 /redux/store.js 文件来让其运行。

二、Redux核心概念

1、Redux工作流程

2、Redux组成部分

2.1、state

state:状态，就是我们传递的数据

2.2、action

action是一个通知对象，里面必须有一个type属性，表示当前通知的类型，至于其他属性，你可以任意添加

可以通过store.dispatch(action对象)来更新仓库中的数据

注意：

  • 在实际开发中，更多人喜欢用action创建函数

  • 在实际开发中，大多数情况下，type会被定义成字符串常量

2.3、reducer

reducer本质是一个函数，它用来响应发送过来的actions,经过处理把state发送给store

  • 在reducer函数中，需要return返回值，这样store才能接收到数据

  • reducer函数接收两个参数，第一个参数是初始化store,第二个参数是action

2.4、store

数据仓库，存放组件数据的地方。一个项目一般只有一个数据仓库,store可以把action和reducer联系在一起。

主要的职责

  • 维护应用的state

  • 提供getState()方法获取state

  • 提供dispatch()方法发送action

  • 通过subscribe()来注册监听

  • 通过subscribe()返回值来注销监听

三、第一个Redux程序

1、创建action

  • 在src目录下创建一个actions文件夹

  • 在该目录下创建一个index.js文件

  • action是一个通知对象，里面必须有一个type属性，这里的num属性是自定义的表示计数器每次增加的个数

const incrementAction={
    type:'increment',
    num:1
}
export {incrementAction}

2、创建reducer

  • 在src目录下创建reducers目录

  • 在该目录下创建index.js文件，用来构建reducer，注意reducer要接收两个参数

  • 第一个参数是默认状态，我们可以定义一个初始化的state，然后进行赋值

  • 在函数里面判断第二个参数action的type值是否是我们发送过的,如果是，我们可以通过return返回新的state

const counterReducer=(state=0,action)=>{
   switch(action.type){
        case 'increment':
            return state+action.num
        default:
            return state
    }
}
export {counterReducer}

3、创建store

  • 在src目录下创建一个文件夹store

  • 在该目录下创建index.js文件，用来构建store,注意createStore函数第一个参数接收的是reducer

import {legacy_createStore as createStore} from 'redux'
import {counterReducer} from '../reducers'
const store=createStore(counterReducer)
export default store

4、在组件中使用

  • 创建components文件夹，该目录下存放自定义组件

  • 在该目录下新建Counter.jsx文件

  • 将Counter.jsx引入到App.js文件中

import Counter from "./components/Counter";
function App() {
  return (
    <div>
        <Counter></Counter>
    </div>
  );
}
export default App;

  • 调用dispatch函数,更新仓库的数据

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'

export default function Counter() {
  const increment=()=>{
      store.dispatch(incrementAction)
  }
  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

  • 当组件加载完毕后，调用 store. subscribe注册监听，监听state数据的变化

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'

export default function Counter() {
  const [count, setCount] = useState(0);
  const increment=()=>{
      store.dispatch(incrementAction)
  }
  useEffect(()=>{
    store.subscribe(()=>{

        console.log('正在监控'+store.getState());
        setCount({})
    })
  })

  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

四、redux中action和reducer的优化

1、action优化

1.1、action creator

我们一般会在页面里面修改数据，即，在页面里面调用store的dispatch方法。那就意味着action对象中的num字段很大可能是动态的，即不同的页面num字段可能是不同的，这样我们就不能把action写成一个死的对象，最好是封装成一个函数，执行过后返回一个action通知对象，然后num的值通过函数的参数来决定。这样的函数我们称之为action创建函数（action creator）

const incrementAction=(num)=>{
    return{
        type:'increment',
        num:num
    }
}
export {incrementAction}
1.2、type常量

在实际开发中，type在多数情况下会被定义成常量，如下所示

  • 在src/actions目录下，新建actionTypes.jsx文件，将所有type类型定义成常量

export const INCREMENT ="increment"

  • 在action creator中引入

import {INCREMENT} from './constant'
const incrementAction=(num)=>{
    return{
        type:INCREMENT,
        num:num
    }
}
export {incrementAction}

2、reducer优化

项目中肯定不止一个数据，所以state的默认值应该是一个对象，而不是其他。而且除了默认值，每当case到一个条件，返回一个新的对象时，应该返回一个全新的对象，然后才是你要修改的数据（当然这些数据，如果是引用类型的话，应该修改其引用本身，否则界面可能不会更新，尽管数据发生变化了

import { INCREMENT } from '../actions/constant'
const counterReducer = (state = { num: 0 }, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
                ...state,
                num: state.num + action.num
            }
        default:
            return state
    }
}
export { counterReducer }

优化后，在组件中调用的代码如下

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'

export default function Counter() {
  const [count, setCount] = useState(0);
  const increment=()=>{
      store.dispatch(incrementAction(2))
  }
  useEffect(()=>{
    store.subscribe(()=>{

        console.log('正在监控'+store.getState());
        setCount({})
    })
  })

  return (
    <div>
        <h1>计数器:{store.getState()}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

五、react-redux概述

为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，本文主要介绍它。

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

1、UI组件

UI 组件有以下几个特征。

  • 只负责 UI 的呈现，不带有任何业务逻辑

  • 没有状态（即不使用this.state这个变量）

  • 所有数据都由参数（this.props）提供

  • 不使用任何 Redux 的 API

2、容器组件

容器组件有以下几个特征。

  • 负责管理数据和业务逻辑，不负责 UI 的呈现

  • 带有内部状态

  • 使用 Redux 的 API

总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

六、react-redux基本使用

1、安装react-redux

npm i react-redux
npm i redux

2、创建action

  • 在constant.jsx中添加INCREMENT

export const INCREMENT="increment";

  • 在src/actions/index.jsx中添加incrementAction

import { INCREMENT } from "./constant";
export const incrementAction=num=>({type:INCREMENT,num})

3、创建reducer

  • 在src/reducers/index.jsx中添加counterReducer

import {INCREMENT} from '../actions/constant'
const counterReducer=(state={num:0},action)=>{
    switch(action.type){
        case INCREMENT:
            return{
                ...state,
                num:state.num+action.num
            }
        default:
            return state
    }
}
export {counterReducer}

4、创建store

在src/store/index.jsx中编写代码如下

import {legacy_createStore as createStore} from 'redux'
import {counterReducer} from '../reducers'
const store=createStore(counterReducer)
export default store

5、全局注入store仓库

  • 在index.js中导入Provider组件

import {Provider} from 'react-redux'

  • 利用provider组件将整个接口进行包裹

  • 给Provider组件设置store的属性，该属性的值就是通过createStore构建出来的store实例对象

import ReactDOM from 'react-dom/client'
import App from './App';
import {Provider} from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
      <App />
    </Provider>
);

  • Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

6、组件关联仓库

由于UI组件不能使用Redux的API所以，如果在组件中如果要使用Redux就必须将UI组件变成容器类组件

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来

import React from 'react'
import { connect } from 'react-redux'

function Counter() {
  render() {
    return (
      <div>
          
      </div>
    )
  }
}
export default connect()(Counter)

7、组件操作仓库

7.1、获取仓库数据

connect 方法接收一个回调函数作为参数：

const mapStateToProps = () => {

}
export default connect(mapStateToProps)(Counter);

该回调函数本身，又可以通过第一个参数接收到仓库中的所有数据

const mapStateToProps = (state) => {
    console.log(state); // 仓库中所有的数据
}
export default connect(mapStateToProps)(Counter);

在该回调函数中，返回一个对象，该对象会和组件的 props 进行合并。换句话说，该函数的返回值会添加到组件的 props 中：

const mapStateToProps = (state) => {
    return {
        数据名: 从 state 中获取的数据值
    }
}
export default connect(mapStateToProps)(Counter);

处理完成后，我们就可以在组件的 props 中访问到对应的仓库数据了：

function Counter(props)
    render() {
        return (
            <div>
                <h1>计数器</h1>
                <h2>{props.数据名}</h2>
            </div>
        )
    }
}
7.2、修改仓库数据

修改仓库数据，依然是通过 dispatch() 方法来触发修改操作。

在组件中，只要和仓库关联过，就能在 props 上直接获取到 dispatch 方法。因此，在组件中可以直接通过 props.dispatch() 方法来触发修改数据的操作。

import React,{useEffect,useState} from 'react'
import store from '../redux/store'
import {incrementAction} from '../redux/actions'
import { connect } from 'react-redux';

function Counter(props) {
  const increment=()=>{
      props.dispatch(incrementAction(3))
  }
  return (
    <div>
        <h1>计数器:{props.num}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}
const mapStateToProps = (state) => {
    console.log(state); // 仓库中所有的数据
    return{
       num:state.num
    }
}
export default connect(mapStateToProps)(Counter)

七、状态机的Hook

针对 React 中的函数组件，React-Redux 中也提供了第三方的 Hook。

1、useSelector

通过调用 useSelector 方法，并传递一个回调函数作为参数，我们可以在这个回调函数中获取到仓库中的 state。

import { useSelector } from 'react-redux'
useSelector((state) => {
    console.log(state);  // 仓库中所有的数据
})

然后我们可以在回调函数中，将我们需要使用的数据 return 出来，然后用一个变量来接收：

const data = useSelector((state) => {
    return 数据;
})

后续组件要使用数据，就可以直接通过变量进行数据的访问了。

2、useDispatch

调用 useDispatch() 方法，可以直接获取到 dispatch() 方法。

import { useDispatch } from 'react-redux'
export default fucntion Test() {
    const dispatch = useDispatch();
    return (
    )
}

如果组件中使用 Hook 来获取 dispatch 方法的话，就不再需要使用 connect 来对组件和仓库进行关联了。

获取到 dispatch 方法后，后续的使用就和 props.dispatch 的使用一致。

关键代码

import React from 'react'
import {useDispatch,useSelector} from 'react-redux'
import {incrementAction} from '../../redux/action'


export default function Counter(props) {
  const num=useSelector((state)=>{
    return state.num
  })
  const dispatch=useDispatch()
  const increment=()=>{
    dispatch(incrementAction(3))
  }
  return (
    <div>
        <h1>计数器:{num}</h1>
        <button onClick={()=>{increment()}}>+</button>
    </div>
  )
}

八、reducer拆分

当项目越来越大的时候，需要管理的数据也会越来越多，如果所有的数据都由一个reducer管理的话，则这个reducer肯定会变得非常的臃肿，且难以维护。所以有必要对reducer做一个拆分，不同功能模块的数据切片，由不同的reducer来管理。假设现在有两个模块，账户管理模块和商品管理模块，每个模块都有数据需要管理

import {combineReducers} from 'redux'
import counterReducer from './counterReducer'
export default combineReducers({
    counter:counterReducer
})

注意：调用时候需要使用使用到切片的名字才能访问到，比如

import React from 'react'
import {useSelector} from 'react-redux'
export default function Counter(props) {
  const count=useSelector((state)=>{
    console.log(state);
    return state.counter.num      //state.切片名的key.num
  })
  return (
    <div>
        <h1>计数器:{count}</h1>
    </div>
  )
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/965690.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[管理与领导-64]：IT基层管理者 - 8项核心技能 - 8 - 打造高效团队

[管理与领导-64]：IT基层管理者 - 8项核心技能 - 8 - 打造高效团队

目录 前言&#xff1a; 一、团队建设对于不同管理层的不同 第1节&#xff1a;认识自己的团队 1.1 团队的生命周期 1.2 常见的团队问题 1.3 团队角色的配置 1.4 团队水平测试 第2节&#xff1a;什么是高绩效团队 2.1 什么是团队 2.2 团队五个基本要素&#xff1a; 2.…
阅读更多...
超图嵌入论文阅读2：超图神经网络

超图嵌入论文阅读2：超图神经网络

超图嵌入论文阅读2&#xff1a;超图神经网络 原文&#xff1a;Hypergraph Neural Networks ——AAAI2019&#xff08;CCF-A&#xff09; 源码&#xff1a;https://github.com/iMoonLab/HGNN 500star 概述 贡献&#xff1a;用于数据表示学习的超图神经网络 (HGNN) 框架&#xf…
阅读更多...
2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉新财经理工 ​​​

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉新财经理工 ​​​

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉新财经理工 ​​​
阅读更多...
什么是盒子模型

什么是盒子模型

什么是盒子模型 盒子模型&#xff0c;也可以称为框模型。 所有 HTML 元素可以看作盒子。在 CSS 中&#xff0c;“box model” 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子&#xff0c;封装周围的 HTML 元素&#xff0c;它包括&#xff1a;边距&#xff0c…
阅读更多...
CSS学习笔记05

CSS学习笔记05

CSS笔记05 定位 position CSS 属性position - 用于指定一个元素在文档中的定位方式。top&#xff0c;right&#xff0c;bottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值&#xff1a; position: static; - 默认值。指定元素使用正常的布局行为&am…
阅读更多...
神经网络--感知机

神经网络--感知机

感知机 单层感知机原理 单层感知机:解决二分类问题&#xff0c;激活函数一般使用sign函数,基于误分类点到超平面的距离总和来构造损失函数,由损失函数推导出模型中损失函数对参数 w w w和 b b b的梯度&#xff0c;利用梯度下降法从而进行参数更新。让1代表A类&#xff0c;0代…
阅读更多...
es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

现在看这张图开始变得云里雾里&#xff0c;所以简单回顾一下 prototype 的基本内容&#xff0c;能够基本读懂这张图的脉络。 先介绍一个基本概念&#xff1a; function Person() {}Person.prototype.name KK;let person1 new Person();在上面的例子中&#xff0c; Person …
阅读更多...
Nor Flash

Nor Flash

核心信息&#xff1a; 工作频率数据吞吐量 bps bit/s&#xff08;传输数据速率&#xff09; Hz&#xff08;时钟频率&#xff09; T/s 56MB/s&#xff08;max&#xff09;448Mb/s&#xff08;数据吞吐量、4路&#xff09;448MHz 112MHz&#xff08;max读、时钟频率&#…
阅读更多...
Spring @Configuration 注解解析原理

Spring @Configuration 注解解析原理

前言 ​ Configuration 注解是 Spring 3.0 版本引入的新特性&#xff08;目前版本 6.0.11&#xff09;&#xff0c;它用于将一个类标记为配置类&#xff0c;通过配置类可以定义和组装 Spring Bean。 一般来说注解都会有相应的解析器&#xff0c;Configuration 注解靠 C…
阅读更多...
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法

Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法

不论搭建什么工程&#xff0c;运行什么文件&#xff0c;只要在Pycharm中出现ImportError: DLL load failed: 找不到指定的模块这样的问题&#xff0c;以下方法都适用&#xff01;&#xff01;&#xff01; 一、问题描述 我在使用pycharm连接webots&#xff0c;用python控制机…
阅读更多...
Redis功能实战篇之附近商户

Redis功能实战篇之附近商户

在互联网的app当中&#xff0c;特别是像美团&#xff0c;饿了么等app。经常会看到附件美食或者商家&#xff0c; 当我们点击美食之后&#xff0c;会出现一系列的商家&#xff0c;商家中可以按照多种排序方式&#xff0c;我们此时关注的是距离&#xff0c;这个地方就需要使用到我…
阅读更多...
JavaScript -【第一周】

JavaScript -【第一周】

文章来源于网上收集和自己原创&#xff0c;若侵害到您的权利&#xff0c;请您及时联系并删除~~~ JavaScript 介绍 变量、常量、数据类型、运算符等基础概念 能够实现数据类型的转换&#xff0c;结合四则运算体会如何编程。 体会现实世界中的事物与计算机的关系理解什么是数据并…
阅读更多...
mybatis源码学习-1-调试环境

mybatis源码学习-1-调试环境

写在前面,这里会有很多借鉴的内容,有以下三个原因 本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…
阅读更多...
【科研论文配图绘制】task7密度图绘制

【科研论文配图绘制】task7密度图绘制

【科研论文配图绘制】task7密度图绘制 task7 了解密度图的定义&#xff0c;清楚密度图是常用使用常见&#xff0c;掌握密度图绘制。 1.什么是密度图 密度图&#xff08;Density Plot&#xff09;是一种用于可视化数据分布的图表类型。它通过在数据中创建平滑的概率密度曲线…
阅读更多...
java反编译工具jd-gui使用

java反编译工具jd-gui使用

文章目录 一、JD-GUI介绍二、下载三、安装四、使用教程五、免责声明摘抄 一、JD-GUI介绍 JD-GUI是一个独立的图形实用程序&#xff0c;显示“.class”文件的Java源代码。 使用JD-GUI浏览重构的源代码&#xff0c;以便即时访问方法和字段。 二、下载 MAC安装包&#xff1a;ht…
阅读更多...
Gorm简单了解

Gorm简单了解

GORM 指南 | GORM - The fantastic ORM library for Golang, aims to be developer friendly. 04_GORM查询操作_哔哩哔哩_bilibili 前置&#xff1a; db调用操作语句中间加debug&#xff08;&#xff09;可以显示对应的sql语句 1.Gorm模型定义&#xff08;理解重点&#xff…
阅读更多...
在R中安装TensorFlow、TensorFlow_Probability、numpy(R与Python系列第二篇)

在R中安装TensorFlow、TensorFlow_Probability、numpy(R与Python系列第二篇)

目录 前言&#xff1a; 1-安装tensorflow库 Step1: 下载R包tensorflow Step2&#xff1a;安装TensorFlow库 Step3&#xff1a;导入R中 2-安装tensorflow_probability库 Step1&#xff1a;下载R包&#xff1a;tfprobability Step2&#xff1a;安装TensorFlow Probability …
阅读更多...
链表OJ练习（2）

链表OJ练习（2）

一、分割链表 题目介绍&#xff1a; 思路&#xff1a;创建两个链表&#xff0c;ghead尾插大于x的节点&#xff0c;lhead尾插小于x的节点。先遍历链表。最后将ghead尾插到lhead后面&#xff0c;将大小链表链接。 我们需要在创建两个链表指针&#xff0c;指向两个链表的头节点&…
阅读更多...
【Mysql系列】（一）MySQL语句执行流程

【Mysql系列】（一）MySQL语句执行流程

首发博客地址 首发博客地址 系列文章地址 参考文章 MySQL 逻辑架构 连接器 连接命令一般是这么写的 mysql -h$ip -P$port -u$user -p 那么 什么是连接器&#xff1f; MySQL 连接器&#xff08;MySQL Connector&#xff09;是用于连接和与 MySQL 数据库进行交互的驱动程序。它提…
阅读更多...
高级IO

高级IO

五种IO模型 1、阻塞等待&#xff1a;在内核将数据准备好之前&#xff0c;系统调用会一直等待。所有的套接字&#xff0c;默认都是阻塞方式。 2、非阻塞等待&#xff1a;如果内核没有将数据准备好&#xff0c;系统调用仍然会返回&#xff0c;并且会返回EWUOLDBLOCK或者EAGAIN错…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023