当前栏目
Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)
Redux Toolkit异步操作
在之前的开发中,我们通过redux-thunk中间件让dispatch中可以进行异步操作, 其实Redux Toolkit工具包默认已经给我们集成了Thunk相关的功能, 我们可以通过createAsyncThunk
函数创建一个异步的action
createAsyncThunk函数有参数:
参数一: 传入事件类型type
参数二: 传入一个函数, 该函数可以执行异步操作, 甚至可以直接传入一个异步函数
export const fetchHomeMultidataAction = createAsyncThunk("fetch/homemultidata", async () => {
const res = await axios.get("http://123.207.32.32:8000/home/multidata")
const banners = res.data.data.banners.list
const recommends = res.data.data.recommends.list
})f
当createAsyncThunk创建出来的action被dispatch时,会存在三种状态:
pending: action被发出,但是还没有最终的结果;
fulfilled: 获取到最终的结果(有返回值的结果);
rejected: 执行过程中有错误或者抛出了异常;
我们可以在createSlice的entraReducer中监听这些结果:
注意: 我们创建的一部action: fetchHomeMultidataAction返回的结果, 会被传到下面监听函数的actions参数中,
通过
actions.payload
获取(也可以对actions进行结构, 直接获取payload)
// extraReducers中针对异步action, 监听它的状态
extraReducers: {
// 处于padding状态时回调
[fetchHomeMultidataAction.pending](state, actions) {
console.log("正处于pending状态")
},
// 处于fulfilled状态时回调
[fetchHomeMultidataAction.fulfilled](state, actions) {
console.log("正处于fulfilled状态")
},
// 处于rejected状态时回调
[fetchHomeMultidataAction.rejected](state, actions) {
console.log("正处于rejected状态")
}
}
演示网络请求的流程:
方式一
:在home.js中, 通过createAsyncThunk函数创建一个异步的action
再在extraReducers中监听这个异步的action的状态, 当他处于fulfilled状态时, 获取到网络请求的数据, 并修改原来state中的数据
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import axios from "axios"
// 创建一个异步的action
export const fetchHomeMultidataAction = createAsyncThunk("fetch/homemultidata", async () => {
const res = await axios.get("http://123.207.32.32:8000/home/multidata")
// 返回结果会传递到监听函数的actions中
return res.data
})
const homeSlice = createSlice({
name: "home",
initialState: {
banners: [],
recommends: []
},
// extraReducers中针对异步action, 监听它的状态
extraReducers: {
[fetchHomeMultidataAction.fulfilled](state, { payload }) {
// 在fulfilled状态下, 将state中的banners和recommends修改为网络请求后的数据
state.banners = payload.data.banner.list
state.recommends = payload.data.recommend.list
}
}
})
export default homeSlice.reducer
方式二
:如果我们不想通过在extraReducers在监听状态, 再修改state这种方法的话, 还有另外的一种做法
我们创建的fetchHomeMultidataAction这个异步action是接受两个参数的
- 参数一, extraInfo: 在派发这个异步action时, 如果有传递参数, 会放在extraInfo里面
- 参数二, store: 第二个参数将store传递过来
这样我们获取到结果后, 通过dispatch修改store中的state, 无需再监听异步action的状态
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
import axios from "axios"
// 创建一个异步的action
export const fetchHomeMultidataAction = createAsyncThunk(
"fetch/homemultidata",
// 有传递过来两个个参数, 从store里面解构拿到dispatch
async (extraInfo, { dispatch }) => {
// 1.发送网络请求获取数据
const res = await axios.get("http://123.207.32.32:8000/home/multidata")
// 2.从网络请求结果中取出数据
const banners = res.data.data.banner.list
const recommends = res.data.data.recommend.list
// 3.执行dispatch, 派发action
dispatch(changeBanners(banners))
dispatch(changeRecommends(recommends))
}
)
const homeSlice = createSlice({
name: "home",
initialState: {
banners: [],
recommends: []
},
reducers: {
changeBanners(state, { payload }) {
state.banners = payload
},
changeRecommends(state, { payload }) {
state.recommends = payload
}
}
})
export const { changeBanners, changeRecommends } = homeSlice.actions
export default homeSlice.reducer
不管是哪种方式, 都需要在页面的componentDidMount生命周期中, 通过派发异步的action发送网络请求
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchHomeMultidataAction } from '../store/features/home'
export class About extends PureComponent {
// 生命周期中, 调用映射的方法派发异步的action
componentDidMount() {
this.props.fetchHomeMultidata()
}
render() {
const { banners, recommends } = this.props
return (
<div>
<h2>About</h2>
<h2>轮播图数据</h2>
<ul>
{
banners.map(item => {
return <li key={item.acm}>{item.title}</li>
})
}
</ul>
<h2>推荐数据</h2>
<ul>
{
recommends.map(item => {
return <li key={item.acm}>{item.title}</li>
})
}
</ul>
</div>
)
}
}
const mapStateToProps = (state) => ({
banners: state.home.banners,
recommends: state.home.recommends
})
// 派发异步的action
const mapDispatchToProps = (dispatch) => ({
fetchHomeMultidata() {
dispatch(fetchHomeMultidataAction())
}
})
export default connect(mapStateToProps, mapDispatchToProps)(About)
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件