【亲测免费】 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 可以很方便地处理这个异步操作。

1. Action Creator：

const fetchUser = (userId) => ({
  type: 'FETCH_USER',
  payload: fetch(`/api/users/${userId}`).then(response => response.json())
});

2. 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;

3. 组件：

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;

最佳实践

1. 统一处理错误：在 reducer 中统一处理错误，避免在每个异步操作中重复处理错误逻辑。
2. 使用常量：使用常量来定义 action 类型，避免拼