Why use redux-thunk?

Question

I don't understand the need for something like redux-thunk. From what I understand a thunk is a function which returns a function. The wrapped expressions and the use of middleware appear to me to do more to obfuscate what is happening. Taken from redux-thunk's sample code

import thunk from 'redux-thunk';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);


// Meet thunks.
// A thunk is a function t hat returns a function.
// This is a thunk.

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!

store.dispatch(
  makeASandwichWithSecretSauce('Me')
);

The above code could be written far more concisely and intuitive:

fetchSecretSauce().then(
  sauce => store.dispatch(makeASandwich('Me', sauce)),
  error => store.dispatch(apologize('The Sandwich Shop', forPerson, error))
)

My question is what need is redux-thunk fulfilling and how does it improve on existing solutions similar to the example above.

Say you need to make an API call, you can write a thunk that either resolve or rejects the promise, and dispatches a SUCCESS or FAIL action accordingly, and from within your component all you need to do is `loadMyThunk()` - all the dispatched actions are abstracted to the thunk. I have a lib `redux-entity` that utilizes a pattern like this: https://github.com/mikechabot/redux-entity/blob/master/src/thunk.js — lux, May 04 '17 at 17:00

score 29 · Answer 1 · edited May 23 '17 at 11:54

29

Redux Thunk teaches Redux to recognize special kinds of actions that are in fact functions.

When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn't need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can also dispatch actions.

The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.

If Redux Thunk middleware is enabled, any time you attempt to dispatch a function instead of an action object, the middleware will call that function with dispatch method itself as the first argument.

And then since we “taught” Redux to recognize such “special” action creators (we call them thunk action creators), we can now use them in any place where we would use regular action creators.

Check this great answer from Dan Abramov himself, it covers everything: https://stackoverflow.com/a/35415559/5714933

Also check these links for more info:

https://github.com/gaearon/redux-thunk#motivation http://redux.js.org/docs/advanced/AsyncActions.html

edited May 23 '17 at 11:54

Community

1
1

answered May 04 '17 at 16:41

Moe

3,467
1
19
25

22

Thanks Mohamed. I appreciate the effort here. The problem is I had already read that post by Dan Abramov and still came away unsatisfied. Reading all these materials I get that thunk can be used to delay the dispatch of an action, but you can easily do that without thunk as I showed in my sample above. The other reasons I found is that you can conditionally dispatch based on the passed getState, but you can also accomplish this without thunk as well and without the addition of a middleware library and another dependency layer to learn. I don't see how it helps for larger applications either. – micahblu May 04 '17 at 20:42
2

@micahblu, I see you already grasped the idea of redux-thunk, honestly there is not much explanation there to be added. Idea is simple, 'delaying-dispatch'. Both redux-redux and redux-thunk implemented bad(design perspective). In the heart, you just create an object and subscribe to its data flow and let react know for re-render. Both libraries are terribly put. Action Creator, Action, Dispatch, Reducer and finally Store. Phew. Quite(made up) terminology. – serkan Feb 25 '19 at 11:27
1

@serkan What are yours well designed alternatives recommendations? – Liron Lavi Mar 24 '20 at 12:34

Why use redux-thunk?

1 Answers1