What are the differences between Redux-Thunk and Redux-Promise when used with Axios apis?

Question

I have been using React , Redux since few months now. One of the most confusing part of the ecosystem is the async data flow. There are many great solutions available and choosing the right solution for your problem is the tough part.

In my application, the action creators mostly have async axios [ajax] calls to my back-end apis. Injecting Redux-Promise as a middleware resolves the issue of async data flow.

Considering the scalable app, I might need to chain multiple axios calls in my action creator. I think I can still use Redux-Promise as a middleware and this would take care of async data flow in my app.

In general the team is more inclined towards using Redux-Thunk, which I feel more complicated syntax for this problem. I need suggestions in evaluating these 2 frameworks considering most of my action creators are making axios calls(promises) only. I have seen a great deal of discussion on Redux-thunk here. I understood how thunk can be useful. . But I need more clarification evaluating Redux-Promise and Redux-Thunk together when used for Promises only. Which middleware is better in such situation and why? What advantages do I get using Redux-Thunk over Redux-Promise ? Or there is none?

Answer 1

Redux Promise is convenient for dispatching three actions (request, success, failure) without writing that code manually.

Redux Thunk is convenient for async data flow when you express one action creator as waiting for another action creator. It also lets you read the current state for conditional dispatches and early bailouts.

You can use them together, or use any one in particular. I would recommend starting with Redux Thunk because it offers more control and is more versatile. After you get it working, you can consider adding Redux Promise to remove some of the boilerplate code related to dispatching three kinds of actions. If you find that it doesn’t buy you much, remove it. On the other hand, if you notice all you thunk action creators just dispatch a single promise, you can remove Redux Thunk instead.

If this is still confusing, I recommend just using Redux Thunk until you get more comfortable with how middleware works.