Redux Promise 中间件

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

文章目录

• • Redux Promise 中间件的作用
  • 安装 Redux Promise
  • 配置 Redux Promise
  • 使用 Redux Promise
  • • 定义 Action Creator
    • 在组件中使用
    • Reducer 处理 Promise 结果
  • Redux Promise 的优势
  • 结论

在 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;

Redux Promise 的优势

• 简洁性：redux-promise 提供了一种简洁的方式来处理基于 Promise 的异步操作。
• 自动处理：中间件自动监听 Promise 的状态，并根据其解决或拒绝的状态分发相应的 action。
• 易于集成：与 Redux 结合良好，易于集成到现有的 Redux 应用中。

结论

redux-promise 中间件是处理 Redux 应用中基于 Promise 的异步操作的便捷工具。通过使用 redux-promise，可以简化异步操作的处理逻辑，并使代码更加清晰和易于维护。