【React】Redux-toolkit 处理异步操作

安装

npm install @reduxjs/toolkit react-redux

创建 store

src\store\index.js

import { configureStore } from '@reduxjs/toolkit';
import homeReducer from './modules/home';const store = configureStore({reducer: {home: homeReducer,},
});export default store;

创建 Reducer

src\store\modules\home.js

import { getHomeGoodPriceData } from '@/services'
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'// 定义异步操作，用于获取首页商品价格信息
export const fetchHomeDataAction = createAsyncThunk('fetchdata', async (payload) => {const res = await getHomeGoodPriceData()return res
})// 创建 Redux slice，管理首页相关的状态
const homeSlice = createSlice({name: 'home',// 定义初始状态，包含商品价格信息initialState: {goodPriceInfo: {},},// reducers 里面包裹的是同步的方法reducers: {// 定义 reducer，用于更新商品价格信息changeGoodPriceInfoAction(state, { payload }) {state.goodPriceInfo = payload},},// 处理异步操作结果，更新状态// 我们在extraReducers中放入的是异步的方法，我们在action中声明的方法可以在此处使用// 在此处我们可以监听创建好的异步action，此处有三个取值是比较常用的// 1、fulfilled 成功之后需要做的操作// 2、pending 加载时需要做的操作// 3、rejected失败后需要做什么处理extraReducers: (builder) => {builder.addCase(fetchHomeDataAction.fulfilled, (state, { payload }) => {state.goodPriceInfo = payload})},
})// 导出 reducer，供 Redux store 使用
export const { changeGoodPriceInfoAction } = homeSlice.actions
export default homeSlice.reducer

对以上builder的解释：此重载接受一个回调函数，该函数接收一个builder对象作为其参数。该构建器提供addCase,addMatcher和addDefaultCase函数，可以调用这些函数来定义此 reducer 将处理的操作。（详情建议官网查）

注入 store

src\index.js

Provider 是React Redux中非常重要的组件,它的主要作用是向整个React应用程序树提供Redux.store。

import { Provider } from 'react-redux'

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components'import App from '@/App'
import './assets/css/index.less'
import 'normalize.css'
import store from './store'
import theme from './assets/theme'const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Suspense fallback='loading'><Provider store={store}><ThemeProvider theme={theme}><HashRouter><App /></HashRouter></ThemeProvider></Provider></Suspense>,
)

使用 store

import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'import { fetchHomeDataAction } from '@/store/modules/home'
import { HomeWrapper } from './style'
import HomeBanner from './components/home-banner'
import SectionHeader from '@/components/section-header'
import SectionRooms from '@/components/section-rooms'const Home = memo(() => {/** 从redux中获取数据 */const { goodPriceInfo } = useSelector((state) => ({goodPriceInfo: state.home.goodPriceInfo,}),shallowEqual,)/** 派发异步的事件: 发送网络请求 */const dispatch = useDispatch()useEffect(() => {dispatch(fetchHomeDataAction('xxxx'))}, [dispatch])return (<HomeWrapper><HomeBanner /><div className='content'><div className='good-price'><SectionHeader title={goodPriceInfo.title} /><SectionRooms roomList={goodPriceInfo.list} /></div></div></HomeWrapper>)
})export default Home

参考资料

Redux-toolkit 傻瓜式使用教程（TS）（demo）