Redux Dutiful Thunk

This is a Redux middleware almost the same as redux-thunk, but it respects Redux types.

Motivation

In Redux Thunk, you need to pass a thunk function directly to dispatch to invoke it.

1// An action creator for Redux Thunk.
2function incrementAsync() {
3  return dispatch => {
4    setTimeout(() => dispatch(increment()), 1000);
5  };
6}
7
8// Dispatch a function.
9store.dispatch(incrementAsync());

But this becomes a problem if you want to write code in a type-safe manner because the dispatch function is supposed to accept Redux actions, not functions.

1// A Redux action consists of a unique `type` and zero or more extra arguments.
2{ type: 'FETCH_USER', id: 30 }

So for example when you use Redux Thunk with TypeScript, you need to tweak Redux type definitions in some way (I don't know about flow much but I guess a similar problem exists). Therefore I could not find a good reason to use a function as a special action. Instead, let's create a normal action to meet the Redux rule and match its type definitions.

1import {thunk} from 'redux-dutiful-thunk';
2
3function incrementAsync() {
4  // Wrap your thunk function by `thunk`.
5  return thunk(async dispatch => {
6      setTimeout(() => dispatch(increment()), 1000);
7  });
8}
9
10// Now the action creator returns a normal action which contains a function you passed.
11console.log(incrementAsync());
12//=> { type: '@@redux-dutiful-thunk/THUNK', thunk: f, }
13
14// So the `dispatch` function can take an action as usual, instead of a function.
15store.dispatch(incrementAsync());

The difference with Redux Thunk is only the thunk wrapping.

1 function incrementAsync() {
2-  return dispatch => {
3+  return thunk(async dispatch => {
4       setTimeout(() => dispatch(increment()), 1000);
5-  };
6+  });
7 }

Installation

npm install redux-dutiful-thunk

Usage

To enable Redux Dutiful Thunk, create a middleware and apply it to your store.

1import {createStore, applyMiddleware} from 'redux';
2import {createThunkMiddleware} from 'redux-dutiful-thunk';
3import rootReducer from './reducers/index';
4
5const store = createStore(
6  rootReducer,
7  applyMiddleware(createThunkMiddleware())
8);

Custom Argument

Like Redux Thunk, you can inject a custom argument to your thunk actions.

1const store = createStore(
2  rootReducer,
3  applyMiddleware(createThunkMiddleware(api))
4);
5
6function fetchUser(id) {
7  return thunk(async (dispatch, getState, api) => {
8    const user = await api.fetchUser(id);
9    dispatch({type: 'FETCH_USER_SUCCESS', user});
10  });
11}

With TypeScript

This library is written in TypeScript so the type definitions are provided.

To make your dispatch function accept any thunk actions, add AnyThunkAction to your action type.

1import {AnyThunkAction} from 'redux-dutiful-thunk';
2
3type Action =
4  | AnyThunkAction
5  | {type: 'FETCH_USER'; id: number}
6  | {type: 'DO_SOMETHING'};

To implement your thunk action creators easily, we recommend to define a Thunk type using ThunkAction.

1import {thunk, ThunkAction} from 'redux-dutiful-thunk';
2import {Action} from './action-type';
3import {State} from './state';
4import {API} from './api';
5import {User} from './models'
6
7type Thunk<R = void> = ThunkAction<State, Action, API, R>;
8
9// A thunk action creator.
10function fetchUser(id: number): Thunk<User> {
11  // You can omit argument types.
12  return thunk(async (dispatch, getState, api) => {
13    return await api.fetchUser(id);
14  });
15}

Thunk's Return Value

Because the dispatch function returns a given value as is, you can get a return value of thunk function in Redux Thunk.

1const user = await dispatch(fetchUser(id));
2console.log('got user', user);

But this cannot be done in Redux Dutiful Thunk.

1// fetchUser returns an action, not a user data.
2const action = dispatch(fetchUser(id));

For this use case, thunk actions have a promise that is resolved to a return value of your thunk function.

1const action = dispatch(fetchUser(id));
2const user = await action.promise;
3
4// So you can write like this
5user = await dispatch(fetchUser(id)).promise;

Of course this promise is type safe.

Specifying Thunk Type

All thunk actions have a same action type. If you want to distinguish each thunk action, use thunkAs instead of thunk. This allows you to specify a thunk type.

1import {thunkAs} from 'redux-dutiful-thunk';
2
3function fetchUser(id: number): Thunk<User> {
4  return thunkAs('FETCH_USER', async (dispatch, getState, api) => {
5    return await api.fetchUser(id);
6  });
7}
8
9const action = fetchUser(3);
10console.log(action.thunkType === 'FETCH_USER'); //=> true

API

Base types

• Thunk<State, Action, Context, R>

  1(dispatch: Dispatch<Action>, getState: () => State, context: Context) => R

• ThunkAction<State, Action, Context, R, T>

  1{
  2  type: string,
  3  thunk: Thunk<State, Action, Context, R>,
  4  promise: Promise<R>,
  5  thunkType: T,
  6}

thunk

1(f: Thunk<S, A, C, R>) => ThunkAction<S, A, C, R, null>

thunkAs

1(type: T, f: Thunk<S, A, C, R>) => ThunkAction<S, A, C, R, T>

isThunkAction

1(action: AnyAction) => action is AnyThunkAction

createThunkMiddleware

1(contxt?: C) => Middleware

See src/index.ts for details.