【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(