《React后台管理系统实战：九》Redux原理：异步实现【redux-thunk】、redux工具、合并多个reducer函数combineReducers()（三）

2024-05-06 19:48
文章标签 javascript 工具 实战 实现 管理系统 函数 react 原理 redux 异步 多个 后台 frontend 合并 reducer combinereducers thunk

本文主要是介绍《React后台管理系统实战：九》Redux原理：异步实现【redux-thunk】、redux工具、合并多个reducer函数combineReducers()（三），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、redux-thunk基础

作用：在 redux 中执行异步任务(ajax, 定时器)

1）安装

cnpm install --save redux-thunk

2）使用：在redux/store.js中

//redux最核心的管理对象: store
import {createStore, applyMiddleware} from 'redux' //【0】引入applyMiddleware
import thunk from 'redux-thunk' // 【1】用来实现redux异步的redux中间件插件
import reducer from './reducer'export default createStore(reducer, applyMiddleware(thunk)) // 【2】创建store对象内部会第一次调用reducer()得到初始状态值

3 ) 在redux/action.js中添加如下

/*
包含n个用来创建action的工厂函数(action creator)*/
import {INCREMENT, DECREMENT} from './action-types'/*
增加的同步action*/
export const increment = number => ({type: INCREMENT, data: number})
/*
减少的同步action: 返回对象*/
export const decrement = number => ({type: DECREMENT, data: number})//【1】增加的异步action: 返回的是函数
export const incrementAsync = number => {return dispatch => {// 1. 执行异步(定时器, ajax请求, promise)setTimeout(() => {// 2. 当前异步任务执行完成时, 分发一个同步actiondispatch(increment(number))}, 1000)}
}

4）components/Counter.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'/*
UI组件主要做显示与与用户交互代码中没有任何redux相关的代码*/
export default class Counter extends Component {static propTypes = {count: PropTypes.number.isRequired,increment: PropTypes.func.isRequired,decrement: PropTypes.func.isRequired,incrementAsync: PropTypes.func.isRequired, //【1】接收}constructor(props) {super(props)this.numberRef = React.createRef()}increment = () => {const number = this.numberRef.current.value * 1this.props.increment(number)}decrement = () => {const number = this.numberRef.current.value * 1this.props.decrement(number)}incrementIfOdd = () => {const number = this.numberRef.current.value * 1if (this.props.count % 2 === 1) {this.props.increment(number)}}//【2】异步函数incrementAsync = () => {const number = this.numberRef.current.value * 1this.props.incrementAsync(number)}render() {const count = this.props.countreturn (<div><p>click {count} times</p><div><select ref={this.numberRef}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> &nbsp;&nbsp;<button onClick={this.increment}>+</button>&nbsp;&nbsp;<button onClick={this.decrement}>-</button>&nbsp;&nbsp;<button onClick={this.incrementIfOdd}>increment if odd</button>&nbsp;&nbsp;<button onClick={this.incrementAsync}>increment async</button></div></div>)}
}

5）containers/App.jsx

import React, {Component} from 'react'
import {connect} from 'react-redux' //引入连接模块
import Counter from '../components/Counter' //引入components下的counter.jsx 注意路径
import {increment, decrement,incrementAsync} from '../redux/actions' //【1】引入redux下的动作incrementAsync// 指定向Counter传入哪些一般属性(属性值的来源就是store中的state)
const mapStateToProps = (state) => ({count: state})
// 指定向Counter传入哪些函数属性
/*如果是函数, 会自动调用得到对象, 将对象中的方法作为函数属性传入UI组件*/
/*const mapDispatchToProps = (dispatch) => ({increment: (number) => dispatch(increment(number)),decrement: (number) => dispatch(decrement(number)),
})*/
/*如果是对象, 将对象中的方法包装成一个新函数, 并传入UI组件 */
const mapDispatchToProps = {increment, decrement}/*
export default connect(mapStateToProps,mapDispatchToProps
)(Counter)*///【2】把incrementAsync添加进去
export default connect(state => ({count: state}),{increment, decrement,incrementAsync},
)(Counter)

效果：

在这里插入图片描述

二、redux开发工具安装

1）下载地址

https://dl.pconline.com.cn/download/2564119-1.html

2）直接拖进浏览器即可

谷歌最新不行就把插件名改为.zip格式解压出来，再到开发中心添加解压后的文件夹即可

3）f12即可看到redux，还不显示则进入4、5步；否则不用进行4、5步

4）安装

cnpm install --save-dev redux-devtools-extension

5）在redux/store.js添加如下

// redux最核心的管理对象: store，
import {createStore, applyMiddleware} from 'redux'
import reducer from './reducer' //导入reducer
import thunk from 'redux-thunk' // 用来实现redux异步的redux中间件插件
import {composeWithDevTools} from 'redux-devtools-extension' //【1】引入工具export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk))) // 【2】再包一层composeWithDevTools()；创建store对象内部会第一次调用reducer()得到初始状态值

效果：

在这里插入图片描述

三、combineReducers()合并多个reduce函数

1)在redux/reducer.js中

/*
reducer函数模块: 根据当前state和指定action返回一个新的state*/
import {combineReducers} from 'redux' //【1】引入
import {INCREMENT, DECREMENT} from './action-types'/*
管理count状态数据的reducer*/
function count(state=1, action) {console.log('count()', state, action)switch (action.type) {case INCREMENT:return state + action.datacase DECREMENT:return state - action.datadefault:return state}}const initUser = {}
/*
【2】再写一个状态。管理user状态数据的reducer*/
function user(state = initUser, action) {switch (action.type) {default:return state}
}/*
【3】合并多个状态；combineReducers函数: 接收包含所有reducer函数的对象, 返回一个新的reducer函数(总reducer)
总的reducer函数管理的state的结构{count: 2,user: {}}*/
export default combineReducers({count,user
})

2 ) containers/App.js写法要改成对应的对象

import React, {Component} from 'react'
import {connect} from 'react-redux'import Counter from '../components/Counter'
import {increment, decrement, incrementAsync} from '../redux/actions'// 指定向Counter传入哪些一般属性(属性值的来源就是store中的state)
const mapStateToProps = (state) => ({count: state.count}) //【1】此处对应读取对象的 state.count
// 指定向Counter传入哪些函数属性
/*如果是函数, 会自动调用得到对象, 将对象中的方法作为函数属性传入UI组件*/
/*const mapDispatchToProps = (dispatch) => ({increment: (number) => dispatch(increment(number)),decrement: (number) => dispatch(decrement(number)),
})*/
/*如果是对象, 将对象中的方法包装成一个新函数, 并传入UI组件 */
const mapDispatchToProps = {increment, decrement}/*
export default connect(mapStateToProps,mapDispatchToProps
)(Counter)*/export default connect(state => ({count: state.count}), //【2】此处对应读取对象的 state.count{increment, decrement, incrementAsync},
)(Counter)

这篇关于《React后台管理系统实战：九》Redux原理：异步实现【redux-thunk】、redux工具、合并多个reducer函数combineReducers()（三）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/965210。

相关文章

详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Oracle查询优化之高效实现仅查询前10条记录的方法与实践

Oracle查询优化之高效实现仅查询前10条记录的方法与实践

《Oracle查询优化之高效实现仅查询前10条记录的方法与实践》：本文主要介绍Oracle查询优化之高效实现仅查询前10条记录的相关资料,包括使用ROWNUM、ROW_NUMBER()函数、FET... 目录1. 使用 ROWNUM 查询2. 使用 ROW_NUMBER() 函数3. 使用 FETCH FI
阅读更多...
Python脚本实现自动删除C盘临时文件夹

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
java图像识别工具类(ImageRecognitionUtils)使用实例详解

java图像识别工具类(ImageRecognitionUtils)使用实例详解

《java图像识别工具类(ImageRecognitionUtils)使用实例详解》：本文主要介绍如何在Java中使用OpenCV进行图像识别,包括图像加载、预处理、分类、人脸检测和特征提取等步骤... 目录前言1. 图像识别的背景与作用2. 设计目标3. 项目依赖4. 设计与实现 ImageRecogni
阅读更多...
Java中Springboot集成Kafka实现消息发送和接收功能

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf
阅读更多...
使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
Golang操作DuckDB实战案例分享

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2