redux-saga-promise
Redux-Saga lets an action trigger a rich sequence of synchronous and asynchronous work. Dispatching the action itself, however, is asynchronous.
Sometimes we need to dispatch an action and wait for it to finish before doing something else. Two common strategies: (1) pass callbacks, which gets messy if you chain several actions and can lead to callback hell; (2) watch Redux state changes in the component to infer completion, which assumes every saga eventually writes to the store. What if we let sagas return values instead?
Hence the question: can we make actions promise-based?
redux-thunk
If actions return Promises, redux-thunk naturally comes to mind. Thunk middleware executes a function, then dispatches the “real” action. But thunks quickly become unwieldy when you need sophisticated orchestration, which is why sagas exist.
So thunk isn’t the tool for this specific problem.
redux-saga-promise
I stumbled upon this library, skimmed the repo, and realized it fits the requirement nicely.
Usage
The official docs and demo are clear, so I won’t rehash them. Here’s a reference commit: 52f7ef7a287a51407d00d89cc04f2cdf09ea8df8
Notes
When registering listeners, attach the action creator itself—not just the action type—because the actual async action’s type name isn’t what you initially defined.
If the app throws
regeneratorRuntime is not defined, importregeneratorRuntime. I covered the fix in another post on this blog.
Final Thoughts
If you’ve used dva.js, you know it wraps saga so actions already return Promises. That’s an easy path if you don’t want to wire things manually.
The trade-off: the higher the level of abstraction, the less visibility you have into the internals. When issues arise, you may end up waiting on upstream fixes. I prefer lightweight stacks—assemble the architecture that fits your team and tech choices.
