Redux Promise Middleware 使用教程
项目介绍
Redux Promise Middleware 是一个用于处理异步操作的 Redux 中间件。它允许你通过分发一个包含 Promise 的 action 来处理异步操作,并在 Promise 的不同状态(pending、fulfilled、rejected)下分发相应的 action。
项目快速启动
安装
首先,安装 redux-promise-middleware
:
npm install redux-promise-middleware --save
配置
在 Redux 应用中引入并配置中间件:
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(promiseMiddleware)
);
export default store;
使用
分发一个包含 Promise 的 action:
const fetchData = () => ({
type: 'FETCH_DATA',
payload: new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
resolve({ data: 'Hello, World!' });
}, 1000);
})
});
// 分发 action
store.dispatch(fetchData());
在 reducer 中处理不同状态的 action:
const initialState = {
data: null,
loading: false,
error: null
};
const dataReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_DATA_PENDING':
return { ...state, loading: true };
case 'FETCH_DATA_FULFILLED':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_REJECTED':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
export default dataReducer;
应用案例和最佳实践
应用案例
假设我们有一个简单的应用,需要从服务器获取用户数据并在页面上显示。使用 Redux Promise Middleware 可以很方便地处理这个异步操作。
- Action Creator:
const fetchUser = (userId) => ({
type: 'FETCH_USER',
payload: fetch(`/api/users/${userId}`).then(response => response.json())
});
- Reducer:
const initialState = {
user: null,
loading: false,
error: null
};
const userReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_USER_PENDING':
return { ...state, loading: true };
case 'FETCH_USER_FULFILLED':
return { ...state, user: action.payload, loading: false };
case 'FETCH_USER_REJECTED':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
export default userReducer;
- 组件:
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from './actions';
const UserProfile = ({ userId }) => {
const dispatch = useDispatch();
const { user, loading, error } = useSelector(state => state.user);
useEffect(() => {
dispatch(fetchUser(userId));
}, [dispatch, userId]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.bio}</p>
</div>
);
};
export default UserProfile;
最佳实践
- 统一处理错误:在 reducer 中统一处理错误,避免在每个异步操作中重复处理错误逻辑。
- 使用常量:使用常量来定义 action 类型,避免拼