Redux 承诺倾听器
Redux 承诺倾听器生成一个将发送 aync 函数 start ,并将在 resolve 或者说 reject 行动已发出.
图书馆 redux-promise 或者说 redux-promise-middleware 有助于将承诺转化为行动。 Redux 承诺倾听器 进行倒转:将行动转化为承诺.
为什么?
大多数的流行形式 图书馆接受 onSubmit 函数,预计返回 a Promise 当提交书完成的时候,它就会解决;当提交书失败的时候,它就会解决。 这种机制与动作管理库根本不相容,例如: redux-saga,它执行副作用(例如 ajax 请求)的方式不会让提交函数轻易返回承诺。 Redux 保证倾听器是一个潜在的解决方案.
使用量
步骤1
用任何Redux 中间软件创建和添加中间软件。 记住要导出中间软件!
// 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, (中文(简体) ), 你的第二步在这里。 。 。 .
.
好了,现在那些反应书呆子走了...
无论你在哪里需要一个同步函数,它发送一个动作,并听取其他动作...
// 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 对象 :
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<any>
将发出启动动作并返回一个承诺的同步函数,该承诺将在发出确定动作时解决,或者在发出拒绝动作时拒绝.
unsubscribe: () => void
清理函数,当不再需要Async函数时,该函数应称为.
无法拨打 unsubscribe() 可能导致记忆漏出。 ⚠️
使用时 react-redux-promise-listener这是为你做的,在 componentWillUnmount。 。 。 .