@teroneko/redux-saga-promise

Use promises in redux sagas with TypeScript-first approach

Prologue

This projects aims to create promise actions (where each action has its deferred promise after surpassing the middleware) that are able to be fullfilled or rejected in redux-saga-manner.

Initially forked from @adobe/redux-saga-promise but completelly revamped to use createAction from @reduxjs/toolkit to support TypeScript.

Table of Contents

• Overview
• Installation
• Promise middleware integration
• Promise action creation
  • Promise action with type
  • Promise action with type and payload
  • Promise action with type and payload creator
• Promise action await
• Promise action fulfillment or rejection
  • implementPromiseAction
  • resolvePromiseAction
  • rejectPromiseAction
• Promise action's reducable lifecycle actions
• Promise action caveats in sagas
• Argument validation
• TypeScript helpers
  • Types
  • Sagas
• Contributing
  • Build and test
• Licensing

Overview

• Redux middlware, namely promiseMiddleware, used to transform a promise-action-marked action (not promise action yet) to a fully qualified promise action that owns a deferred promise to allow a deferred fulfillment or rejection.
• Saga helpers namely
  • implementPromiseAction() to resolve and reject by passing either a generator function, an asnyc function or simply a function where the return value is used to fulfill the deferred promise inside the promise action,
  • resolvePromiseAction() to resolve-only the deferred promise inside the promise action and
  • rejectPromiseAction() to reject-only the deferred promise inside the promise action.
• Lifecyle actions namely
  • promiseAction.trigger (same instance like promiseAction) created by you (via promiseAction()) and dispatched against the redux store,
  • promiseAction.resolved created after the deferred promise has been resolved and
  • promiseAction.rejected created after the deferred promise has been rejected
  • can be used in reducers or wherever you would need these actions.
• TypeScript helper types

Installation

npm install @teroneko/redux-saga-promise

Promise middleware integration

You must include include promiseMiddleware in the middleware chain, and it must come before sagaMiddleware:

1import { applyMiddleware, createStore } from "redux"
2import { promiseMiddleware }            from "@teroneko/redux-saga-promise"
3import createSagaMiddleware             from "redux-saga"
4
5// ...assuming rootReducer and rootSaga are defined
6const sagaMiddleware = createSagaMiddleware()
7const store          = createStore(rootReducer, {}, applyMiddleware(promiseMiddleware, sagaMiddleware))
8sagaMiddleware.run(rootSaga)

Promise action creation

Use one of following method to create a promise action.

Promise action with type

Create a promise action (creator) with action-type.

1import { promiseActionFactory } from "@teroneko/redux-saga-promise"
2
3// creates a promise action with only a type (string)
4const actionCreator = promiseActionFactory<resolve_value_type_for_promise>().create(type_as_string)
5const action = promiseActionFactory<resolve_value_type_for_promise>().create(type_as_string)()
6// equivalent to
7const actionCreator = createAction(type_as_string)
8const action = createAction(type_as_string)()

Promise action with type and payload

Create a promise action (creator) with action-type and payload.

1import { promiseActionFactory } from "@teroneko/redux-saga-promise"
2
3// creates a promise action with type (string) and payload (any)
4const actionCreator = promiseActionFactory<resolve_value_type_for_promise>().create<payload_type>(type_as_string)
5const action = promiseActionFactory<resolve_value_type_for_promise>().create<payload_type>(type_as_string)({} as payload_type) // "as payload_type" just to show intention
6// equivalent to
7const actionCreator = createAction<payload_type>(type_as_string)
8const action = createAction<payload_type>(type_as_string)({} as payload_type) // "as payload_type" just to show intention

Promise action with type and payload creator

Create a promise action (creator) with a action-type and an individial payload (creator).

1import { promiseActionFactory } from "@teroneko/redux-saga-promise"
2
3// creates a promise action with type (string) and payload creator (function)
4const actionCreator = promiseActionFactory<resolve_value_type_for_promise>().create(type_as_string, (payload: payload_type) => { payload })
5const action = promiseActionFactory<resolve_value_type_for_promise>().create(type_as_string, (payload: payload_type) => { payload })({} as payload_type) // "as payload_type" just to show intention
6// equivalent to
7const actionCreator = createAction(type_as_string, (payload: payload_type) => { payload })
8const action = createAction(type_as_string, (payload: payload_type) => { payload })({} as payload_type) // "as payload_type" just to show intention

Promise action await

Await a promise action after it has been dispatched towards the redux store.

:warning: Keep in mind that the action is not awaitable after its creation but as soon it surpassed the middleware!

1// Internally all members of the promiseAction (without
2// promise capabilities) gets assigned to the promise.
3const promise = store.dispatch(promiseAction());
4const resolvedValue = await promise;

Feel free to use then, catch or finally on promise.

Promise action fulfillment or rejection

Either you use

• implementPromiseAction(action, function) to resolve and reject by passing either a generator function, an asnyc function or simply a function where the return value is used to fulfill the deferred promise,
• resolvePromiseAction(action, value) to resolve-only the deferred promise inside the promise action or
• rejectPromiseAction(action, value) to reject-only the deferred promise inside the promise action,

because it is up to you as the implementer to resolve or reject the promise"s action in a saga.

implementPromiseAction

The most convenient way! You give this helper a saga function which it will execute. If the saga function succesfully returns a value, the promise will resolve with that value. If the saga function throws an error, the promise will be rejected with that error. For example:

1import { call, takeEvery }        from "redux-saga/effects"
2import { promises as fsPromises } from "fs"
3import { implementPromiseAction } from "@teroneko/redux-saga-promise"
4
5import promiseAction from "./promiseAction"
6
7//
8// Asynchronously read a file, resolving the promise with the file"s
9// contents, or rejecting the promise if the file can"t be read.
10//
11function * handlePromiseAction (action) {
12  yield call(implementPromiseAction, action, function * () {
13    // 
14    // Implemented as a simple wrapper around fsPromises.readFile.
15    // Rejection happens implicilty if fsPromises.readFile fails.
16    //
17    const { path } = action.payload
18    return yield call(fsPromises.readFile, path, { encoding: "utf8" })
19  })
20}
21
22export function * rootSaga () {
23  yield takeEvery(promiseAction, handlePromiseAction)
24})

If you call implementPromiseAction() with a first argument that is not a promise action, it will throw an error (see Argument Validation below).

resolvePromiseAction

Sometimes you may want finer control, or want to be more explicit when you know an operation won"t fail. This helper causes the promise to resolve with the passed value. For example:

1import { call, delay, takeEvery } from "redux-saga/effects"
2import { resolvePromiseAction }   from "@teroneko/redux-saga-promise"
3
4import promiseAction from "./promiseAction"
5
6//
7// Delay a given number of seconds then resolve with the given value.
8//
9function * handlePromiseAction (action) {
10  const { seconds, value } = action.payload
11  yield delay(seconds*1000)
12  yield call(resolvePromiseAction, action, value)
13}
14
15function * rootSaga () {
16  yield takeEvery(promiseAction, handlePromiseAction)
17})

If you call resolvePromiseAction() with a first argument that is not a promise action, it will throw an error (see Argument Validation below).

rejectPromiseAction

Sometimes you may want finer control, or want to explicitly fail without needing to throw. This helper causes the promise to reject with the passed value, which typically should be an Error. For example:

1import { call, takeEvery }     from "redux-saga/effects"
2import { rejectPromiseAction } from "@teroneko/redux-saga-promise"
3
4import promiseAction from "./promiseAction"
5
6//
7// TODO: Implement this!   Failing for now
8//
9function * handlePromiseAction (action) {
10  yield call(rejectPromiseAction, action, new Error("Sorry, promiseAction is not implemented yet")
11}
12
13function * rootSaga () {
14  yield takeEvery(promiseAction, handlePromiseAction)
15})

If you call rejectPromiseAction() with a first argument that is not a promise action, it will throw an error (see Argument Validation below).

Promise action's reducable lifecycle actions

Commonly you want the redux store to reflect the status of a promise action: whether it"s pending, what the resolved value is, or what the rejected error is.

Behind the scenes, promiseAction = promiseActionFactory().create("MY_ACTION") actually creates a suite of three actions:

• promiseAction.trigger: An alias for promiseAction, which is what you dispatch that then creates the promise.

• promiseAction.resolved: Dispatched automatically by promiseMiddleware when the promise is resolved; its payload is the resolved value of the promise

• promiseAction.rejected: Dispatched automatically by promiseMiddleware when the promise is rejected; its payload is the rejection error of the promise

You can easily use them in handleActions of redux-actions or createReducer of @reduxjs/toolkit:

1import { handleActions } from "redux-actions"
2import promiseAction from "./promiseAction"
3
4//
5// For the readFile wrapper described above, we can keep track of the file in the store
6//
7export const reducer = handleActions({
8    [promiseAction.trigger]:  (state, { payload: { path } }) => ({ ...state, file: { path, status: "reading"} }),
9    [promiseAction.resolved]: (state, { payload: contents }) => ({ ...state, file: { path: state.file.path, status: "read", contents } }),
10    [promiseAction.rejected]: (state, { payload: error })    => ({ ...state, file: { path: state.file.path, status: "failed", error } }),
11  }, {})

Promise action caveats in sagas

In the sagas that perform your business logic, you may at times want to dispatch a promise action and wait for it to resolve. You can do that using redux-saga"s putResolve Effect:

const result = yield putResolve(myPromiseAction)

This dispatches the action and waits for the promise to resolve, returning the resolved value. Or if the promise rejects it will bubble up an error.

Caution! If you use put() instead of putResolve(), the saga will continue execution immediately without waiting for the promise to resolve.

Argument validation

To avoid accidental confusion, all the helper functions validate their arguments and will throw a custom Error subclass ArgumentError in case of error. This error will be bubbled up by redux-saga as usual, and as usual you can catch it in a saga otherwise it will will bubble up to the onError hook. If you want to, you can test the error type, e.g.:

1import { applyMiddleware, compose, createStore } from "redux"
2import { ArgumentError, promiseMiddleware }      from "@teroneko/redux-saga-promise"
3import createSagaMiddleware                      from "redux-saga"
4
5// ...assuming rootReducer and rootSaga are defined
6const sagaMiddleware = createSagaMiddleware({ onError: (error) => {
7  if (error instanceof ArgumentError) {
8    console.log("Oops, programmer error! I called redux-saga-promise incorrectly:", error)
9  } else {
10    // ...
11  }
12})
13const store = createStore(rootReducer, {}, compose(applyMiddleware(promiseMiddleware, sagaMiddleware)))
14sagaMiddleware.run(rootSaga)

Additionally, all the helper functions will throw a custom Error subclass ConfigurationError if promiseMiddleware was not properly included in the store.

TypeScript helpers

Types

promiseAction.types does not really exist. It only exists as TypeScript-type to make use of typeof:

1const promiseAction = promiseActionFactory<number>().create("MY_ACTION");
2
3declare const type_of_promise_returned_when_surpassing_promise_middleware: typeof promiseAction.types.promise;
4declare const type_of_resolved_value_from_promise_of_promise_action: typeof promiseAction.types.resolveValue;
5
6declare const type_of_trigger_action_that_got_created_from_the_action_creator: typeof promiseAction.types.triggerAction;
7declare const type_of_resolved_action_that_got_created_from_the_action_creator: typeof promiseAction.types.resolvedAction;
8declare const type_of_rejected_action_that_got_created_from_the_action_creator: typeof promiseAction.types.rejectedAction;

Sagas

redux-saga cannot infer the parameters and return type of promiseAction correctly when using the call effect or equivalent, so you can use the pre-typed sagas:

1const { implement, resolve, reject } = promiseAction.sagas;
2
3// Instead of this...
4call(implementPromiseAction, promiseAction(), () => 2);
5// ... use this for better TypeScript support:
6call(promiseAction.sagas.implement, promiseAction(), () => 2);

Contributing

Build and test

package.json defines the following scripts:

• npm build: transpiles the source, placing the result in dist/src/index.js
• npm test: builds, and then runs the test suite.

The tests are written using ts-jest;

Licensing

This project is licensed under the MIT License. See LICENSE for more information.