# @colony/redux-promise-listener 中文文档 规范地址：https://npmcn.com/package/%40colony/redux-promise-listener/ 版本：1\.3\.0 npm 元数据更新时间：2024-03-18T21:22:40.776Z 中文译文更新时间：2026-11-10T11:53:43.906Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40colony/redux-promise-listener 原文对照：https://npmcn.com/package/%40colony/redux-promise-listener/?lang=original 项目主页：https://github.com/joincolony/redux-promise-listener#readme 源码仓库：https://github.com/joincolony/redux-promise-listener ## 关键信息（来自 npm 元数据） - 包体积（解压后）：26.4 kB，12 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：redux \>3\.0\.0 - 首次发布：2019-01-15T15:29:12.662Z - 最新版本发布：2019-01-25T07:06:08.886Z - 近 30 天下载量：3441（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：2（近 12 个月 0 个） ## 中文简介 一个允许将动作转换成承诺的 Redux 中间软件 ## 安装 ```sh npm install @colony/redux-promise-listener ``` 也可以使用：`pnpm add @colony/redux-promise-listener`、`yarn add @colony/redux-promise-listener`、`bun add @colony/redux-promise-listener` ## README # Redux 承诺倾听器 [![NPM Version](https://img.shields.io/npm/v/redux-promise-listener.svg?style=flat)](https://www.npmjs.com/package/redux-promise-listener) [![NPM Downloads](https://img.shields.io/npm/dm/redux-promise-listener.svg?style=flat)](https://npm-stat.com/charts.html?package=redux-promise-listener) [![Build Status](https://travis-ci.org/erikras/redux-promise-listener.svg?branch=master)](https://travis-ci.org/erikras/redux-promise-listener) [![codecov.io](https://codecov.io/gh/erikras/redux-promise-listener/branch/master/graph/badge.svg)](https://codecov.io/gh/erikras/redux-promise-listener) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) Redux 承诺倾听器生成一个将发送 aync 函数 `start` ,并将在 `resolve` 或者说 `reject` 行动已发出. 图书馆 [`redux-promise`](https://github.com/redux-utilities/redux-promise) 或者说 [`redux-promise-middleware`](https://github.com/pburtchaell/redux-promise-middleware) 有助于将承诺转化为行动。 Redux 承诺倾听器 _进行倒转_:将行动转化为承诺. ## 为什么? 大多数的流行形式 图书馆接受 `onSubmit` 函数,预计返回 a `Promise` 当提交书完成的时候,它就会解决;当提交书失败的时候,它就会解决。 这种机制与动作管理库根本不相容,例如: [`redux-saga`](https://redux-saga.js.org/),它执行副作用(例如 ajax 请求)的方式不会让提交函数轻易返回承诺。 Redux 保证倾听器是一个潜在的解决方案. - [使用量](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-usage) - [步骤1](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-step-1) - [步骤2](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-step-2) - [避免冲突](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-avoiding-conflicts) - [API 密码](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-api) - [`createListener: () => PromiseListener`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-createlistener---promiselistener) - [`middleware.generateAsyncFunction: (config: Config) => AsyncFunction`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-middlewaregenerateasyncfunction-config-config--asyncfunction) - [类型](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-types) - [`ActionMatcher: Action => boolean`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-actionmatcher-action--boolean) - [`PromiseListener`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-promiselistener) - [`middleware: Middleware`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-middleware-middleware) - [`createAsyncFunction: (config: Config) => AsyncFunction`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-createasyncfunction-config-config--asyncfunction) - [`Config`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-config) - [`start: string`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-start-string) - [`resolve: string | ActionMatcher`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-resolve-string--actionmatcher) - [`reject: string | ActionMatcher`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-reject-string--actionmatcher) - [`setPayload?: (action: Object, payload: any) => Object`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-setpayload-action-object-payload-any--object) - [`getPayload?: (action: Object) => any`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-getpayload-action-object--any) - [`getError?: (action: Object) => any`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-geterror-action-object--any) - [`AsyncFunction`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-asyncfunction) - [`asyncFunction: (payload: any) => Promise`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-asyncfunction-payload-any--promiseany) - [`unsubscribe: () => void`](https://npmcn.com/package/%40colony/redux-promise-listener/#readme-unsubscribe---void) ## 使用量 ### 步骤1 用任何Redux 中间软件创建和添加中间软件。 记住要导出中间软件! ```jsx // store.js import { createStore, applyMiddleware } from 'redux' import createReduxPromiseListener from 'redux-promise-listener' const reduxPromiseListener = createReduxPromiseListener() const store = createStore( reducer, initialState, applyMiddleware(...otherMiddleware, reduxPromiseListener.middleware) ) export const promiseListener = reduxPromiseListener // <---- ⚠️ IMPORTANT ⚠️ export default store ``` ### 步骤2 使用时 `react-redux`, (中文(简体) ), [你的第二步在这里](https://github.com/erikras/react-redux-promise-listener#step-2)。 。 。 . . 好了,现在那些反应书呆子走了... 无论你在哪里需要一个同步函数,它发送一个动作,并听取其他动作... ```jsx // someFile.js import { promiseListener } from './store.js' const generatedAsyncFunction = promiseListener.generateAsyncFunction( 'START_ACTION_TYPE', // the type of action to dispatch when this function is called 'RESOLVE_ACTION_TYPE', // the type of action that will resolve the promise 'REJECT_ACTION_TYPE' // the type of action that will reject the promise ) // This structure is in the shape: // { // asyncFunction, <--- the async function that dispatches the start action and returns a Promise // unsubscribe <--- a function to unsubscribe from the Redux store // } // dispatches an action { type: 'START_ACTION_TYPE', payload: values } generatedAsyncFunction.asyncFunction(values).then( // called with action.payload when an action of // type 'RESOLVE_ACTION_TYPE' is dispatched resolvePayload => { // do happy stuff 😄 }, // called with action.payload when an action of // type 'REJECT_ACTION_TYPE' is dispatched rejectPayload => { // do sad stuff 😢 } ) // when done, to prevent memory leaks generatedAsyncFunction.unsubscribe() ``` ## 避免冲突 默认情况下,当第一个匹配定义匹配器的动作发出时,听众将会成功. 大多数时候这不是所期望的行为(因为多个动作可以同时被发射). 为避免这种情况,已发出行动在其元字段获得ID属性. 如果这个 id 存在于 `resolve`, (中文(简体) ), `reject` 动作只针对这些 id 匹配初始生成的 。 由你来通过你萨加的ID。 最简单的方法是穿过整个 `meta` 对象 : ```javascript function* saga() { while(true) { const { payload, meta } = yield take('RESOURCE_REQUEST') ^ try { const detail = yield call(callApi, payload) // payload == { id: 'foo' } yield put({ type: 'RESOURCE_SUCCESS', payload: detail, meta ^ }) } catch (e) { yield put({ type: 'RESOURCE_FAILURE', payload: e, error: true, ^ meta ^ }) } } } ``` ## API 密码 ### `createListener: () => PromiseListener` 此库的默认导出 。 创建一个 Redux 中间软件, 但此软件上还有一个功能叫做 `generateAsyncFunction` ### `middleware.generateAsyncFunction: (config: Config) => AsyncFunction` ## 类型 ### `ActionMatcher: Action => boolean` 用于对Redux行动作出决定的前提. ### `PromiseListener` 具有下列值的对象: #### `middleware: Middleware` 创建您的 Redux 商店时应该使用的 Redux 中间软件 . #### `createAsyncFunction: (config: Config) => AsyncFunction` 需要一个 `Config` 并返回含有自动同步函数的对象,该对象可以在指定动作的发送时发出动作并解析/拒绝承诺,并返回用于从 Redux 商店中取消订阅此收听器的函数. ### `Config` 具有下列值的对象: #### `start: string` 这个 `type` 用于调用函数时的调度. #### `resolve: string | ActionMatcher` 这个 `type` 或返回的上游函数 `true` 需要解决的行动类型. #### `reject: string | ActionMatcher` 这个 `type` 或返回的上游函数 `true` 被否决的行动类型. #### `setPayload?: (action: Object, payload: any) => Object` 一个设置有效载荷的函数(参数传递给ASync函数). 默认为 `(action, payload) => ({ ...action, payload })`。 。 。 . #### `getPayload?: (action: Object) => any` 一种功能是使有效载荷脱离决心行动,以通过它来解决承诺。 默认为 `(action) => action.payload`。 。 。 . #### `getError?: (action: Object) => any` 将错误从拒绝动作中解出以拒绝承诺的函数 。 默认为 `(action) => action.payload`。 。 。 . ### `AsyncFunction` 具有下列值的对象: #### `asyncFunction: (payload: any) => Promise` 将发出启动动作并返回一个承诺的同步函数,该承诺将在发出确定动作时解决,或者在发出拒绝动作时拒绝. #### `unsubscribe: () => void` 清理函数,当不再需要Async函数时,该函数应称为. 无法拨打 `unsubscribe()` 可能导致记忆漏出。 ⚠️ 使用时 `react-redux-promise-listener`这是为你做的,在 `componentWillUnmount`。 。 。 . ## 常见问题 ### @colony/redux-promise-listener 是什么？ 一个允许将动作转换成承诺的 Redux 中间软件 ### 如何安装 @colony/redux-promise-listener？ 在项目目录运行 npm install @colony/redux-promise-listener，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：redux（\>3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @colony/redux-promise-listener 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/colony\_\_redux-promise-listener 是否存在。 ### @colony/redux-promise-listener 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @colony/redux-promise-listener 可以商用吗？ @colony/redux-promise-listener 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @colony/redux-promise-listener 的下载量有多少？ 根据 npm 官方下载统计，@colony/redux-promise-listener 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,441 次，日均约 115 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @colony/redux-promise-listener 还在维护吗？ 最新版本 1\.3\.0 发布于 2019/01/25（7 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/01/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。