当前位置：首页 > news >正文

Redux Promise 中间件

news 2025/4/29 2:32:49

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在 Redux 应用中，处理异步操作是一个常见的需求。除了 redux-thunk 和 redux-saga，redux-promise 是另一个用于处理异步操作的中间件。redux-promise 允许 dispatch 方法分发一个 Promise 对象，并在 Promise 解决（resolve）或拒绝（reject）时分发相应的 action。

Redux Promise 中间件的作用

redux-promise 中间件使得处理基于 Promise 的异步操作变得更加简洁。它允许 action creators 返回一个 Promise 对象，中间件会自动监听这个 Promise 的状态，并根据其解决或拒绝的状态分发相应的 action。

安装 Redux Promise

首先，需要安装 redux-promise：

npm install redux-promise

配置 Redux Promise

在创建 Redux store 时，需要应用 redux-promise 中间件：

import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import rootReducer from './reducers';const store = createStore(rootReducer, applyMiddleware(promiseMiddleware));export default store;

使用 Redux Promise

定义 Action Creator

使用 redux-promise 时，action creator 返回一个 Promise 对象：

// actions.js
import axios from 'axios';export const FETCH_DATA = 'FETCH_DATA';export const fetchData = () => {return axios.get('https://api.example.com/data').then((response) => response.data);
};

在组件中使用

在组件中，可以像分发普通 action 一样分发返回 Promise 的 action creator：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';const DataComponent = () => {const dispatch = useDispatch();const data = useSelector((state) => state.data);const loading = useSelector((state) => state.loading);const error = useSelector((state) => state.error);useEffect(() => {dispatch(fetchData()).then(() => {// Promise resolved}).catch(() => {// Promise rejected});}, [dispatch]);if (loading) return <div>Loading...</div>;if (error) return <div>Error: {error}</div>;return (<div><h1>Data</h1><ul>{data.map((item, index) => (<li key={index}>{item}</li>))}</ul></div>);
};export default DataComponent;

Reducer 处理 Promise 结果

Reducer 需要根据 Promise 的解决或拒绝状态来更新状态：

// reducers.js
import { FETCH_DATA, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from './actions';const initialState = {data: [],loading: false,error: null,
};const rootReducer = (state = initialState, action) => {switch (action.type) {case FETCH_DATA:return { ...state, loading: true, error: null };case `${FETCH_DATA}_PENDING`:return { ...state, loading: true };case `${FETCH_DATA}_FULFILLED`:return { ...state, loading: false, data: action.payload };case `${FETCH_DATA}_REJECTED`:return { ...state, loading: false, error: action.payload };default:return state;}
};export default rootReducer;