Redux-Pender 使用教程

Redux-Pender 使用教程

redux-penderredux middleware that helps to manages async actions based on promise项目地址:https://gitcode.com/gh_mirrors/re/redux-pender

1. 项目介绍

Redux-Pender 是一个基于 Promise 的 Redux 中间件，旨在帮助开发者更轻松地管理异步操作。它提供了一些有用的工具，使得处理异步操作变得更加简单。Redux-Pender 的设计灵感来自于 redux-promise-middleware，但与之不同的是，Redux-Pender 提供了一些额外的实用功能，例如处理 Promise 的取消操作。

2. 项目快速启动

安装

首先，你需要通过 npm 安装 redux-pender：

npm install --save redux-pender

配置 Store

在你的 Redux store 中配置 redux-pender 中间件：

import { applyMiddleware, createStore, combineReducers } from 'redux';
import { penderMiddleware, penderReducer } from 'redux-pender';

const reducers = combineReducers({
  // 你的其他 reducers
  pender: penderReducer
});

const store = createStore(reducers, applyMiddleware(penderMiddleware()));

创建异步 Action

使用 createPenderAction 创建一个基于 Promise 的 Action：

import { createPenderAction } from 'redux-pender';

const loadPost = createPenderAction('LOAD_POST', loadPostApi);

Reducer 处理 Action

在你的 Reducer 中处理异步 Action：

import { handleActions } from 'redux-actions';
import { pender } from 'redux-pender';

const initialState = {
  post: []
};

export default handleActions({
  [pender({
    type: 'LOAD_POST',
    onSuccess: (state, action) => ({
      ...state,
      post: action.payload.data
    }),
    onFailure: (state, action) => ({
      ...state,
      error: action.payload
    })
  })]
}, initialState);

3. 应用案例和最佳实践

处理异步请求的取消

Redux-Pender 支持异步请求的取消操作。你可以通过调用 cancel() 方法来取消一个正在进行的异步请求：

const p = loadPost(1);
p.cancel();

当 cancel() 被调用时，Redux-Pender 会自动分发一个 ACTION_TYPE_CANCEL 的 Action，你可以在 Reducer 中处理这个 Action：

pender({
  type: 'LOAD_POST',
  onCancel: (state, action) => ({
    ...state,
    loading: false
  })
});

使用 applyPenders 简化 Reducer

applyPenders 是一个辅助函数，可以帮助你更轻松地应用 pender：

import { handleActions } from 'redux-actions';
import { pender, applyPenders } from 'redux-pender';

const initialState = {
  post: []
};

const reducer = handleActions({
  // 其他 Action 处理
}, initialState);

export default applyPenders(reducer, [
  pender({
    type: 'LOAD_POST',
    onPending: (state, action) => ({
      ...state,
      loading: true
    }),
    onSuccess: (state, action) => ({
      ...state,
      post: action.payload.data
    }),
    onFailure: (state, action) => ({
      ...state,
      error: action.payload
    })
  })
]);

4. 典型生态项目

Redux-Saga

Redux-Saga 是另一个处理 Redux 异步操作的流行库。与 Redux-Pender 不同，Redux-Saga 使用 ES6 的 Generator 函数来管理异步流程。如果你需要更复杂的异步操作管理，Redux-Saga 可能是一个更好的选择。

Redux-Thunk

Redux-Thunk 是一个简单的 Redux 中间件，允许你编写返回函数而不是 Action 的 Action Creators。它适用于简单的异步操作，但对于复杂的异步流程，Redux-Pender 提供了更强大的功能。

Redux-Observable

Redux-Observable 是基于 RxJS 的 Redux 中间件，适用于需要处理复杂事件流的应用。如果你熟悉 RxJS，Redux-Observable 可能是一个不错的选择。

通过这些生态项目的结合使用，你可以根据项目的具体需求选择最适合的异步操作管理方案。

redux-penderredux middleware that helps to manages async actions based on promise项目地址:https://gitcode.com/gh_mirrors/re/redux-pender