Redux-thunk vs. async generators

Do Async
codeburst
Published in
2 min readDec 16, 2017

--

Yeah, you can use ES6+ generators as your action creators. You might not need redux-thunk anymore.

Usage

How can generators help? You can yield action objects to dispatch them! No wrapping each time with dispatch:

Async generator as an action creator

When you invoke a generator, its body is not executed, but iterator object is returned instead. You usually wrap your action creators into a dispatch call, so iterator will be dispatched to the store. You’ll need some redux middleware to handle iterators. Here it is:

This middleware handles ‘nextable’ objects. It calls iterator’s next() method and generator function's body is executed step by step. Generator yields actions and they are dispatched to the store.

How you can get the state? yield always returns a new state. You can yield nothing (undefined), if you just want to get the current state (nothing will be dispatched):

// Inside generator:let state = yield;

or
const params = getParamsFromState(yield); // yield expression

You can also return some data from generator and get it with .then:

signIn().then(username => {
console.log(username);
});

Further refactoring

More than that, if you use this lib: redux-action-creators

… you can get rid of type constants and additional actions in order to define your action creator in one block of code:

It kinda ‘generates’ sub-types for your action creators and is a very handy tool.

Have fun with Redux!

--

--