redux-act-async

Create async actions and reducers based on redux-act

Install

1npm install redux-act-async --save

Badges

Usage

1
2import thunk from 'redux-thunk'
3import {createStore, applyMiddleware} from 'redux';
4import {createActionAsync, createReducerAsync} from 'redux-act-async';
5
6// The async api to call, must be a function that returns a promise
7let user = {id: 8};
8function apiOk(){
9  return Promise.resolve(user);
10}
11
12// createActionAsync will create 4 synchronous action creators:
13// login.request, login.ok, login.error and login.reset
14const login = createActionAsync('LOGIN', apiOk);
15
16/*
17createReducerAsync takes an async action created by createActionAsync.
18It reduces the following state given the four actions:  request, ok, error and reset.
19const defaultsState = {
20    loading: false,
21    request: null,
22    data: null,
23    error: null
24};
25
26if you need to overwrite the defaultsState just insert your initialState as a second paramenter in the createReducerAsync function. Just like that:
27
28const initialState = {
29    loading: false,
30    request: null,
31    data: {custom: "intitial data"},
32    error: null
33};
34
35const reducer = createReducerAsync(login, initialState)
36
37*/
38const reducer = createReducerAsync(login)
39
40const store = createStore(reducer, applyMiddleware(thunk));
41
42await store.dispatch(login({username:'lolo', password: 'password'}));
43

Legacy redux

In a nutshell, the following code:

1const options = {noRethrow: false};
2const loginAction = createActionAsync('LOGIN', api, options);
3const loginReducer = createReducerAsync(loginAction)

is equivalent to:

1const LOGIN_REQUEST = 'LOGIN_REQUEST'
2const LOGIN_OK = 'LOGIN_OK'
3const LOGIN_ERROR = 'LOGIN_ERROR'
4const LOGIN_RESET = 'LOGIN_RESET'
5
6const loginRequest = (value) => ({
7  type: LOGIN_REQUEST,
8  payload: value
9})
10
11const loginOk = (value) => ({
12  type: LOGIN_OK,
13  payload: value
14})
15
16const loginError = (value) => ({
17  type: LOGIN_ERROR,
18  payload: value
19})
20
21const loginReset = (value) => ({
22  type: LOGIN_RESET,
23  payload: value
24})
25
26const options = {noRethrow: true};
27
28export const login = (...args) => {
29  return (dispatch, getState) => {
30    dispatch(loginRequest(...args));
31    return api(...args, dispatch, getState)
32    .then(response => {
33      const out = {
34          request: args,
35          response: response
36      }
37
38      dispatch(loginOk(out))
39      return out;
40    })
41    .catch(error => {
42      const errorOut = {
43          actionAsync,
44          request: args,
45          error: error
46      }
47      dispatch(loginError(errorOut))
48      if(!options.noRethrow) throw errorOut;
49    })
50  }
51}
52
53const defaultsState = {
54    loading: false,
55    request: null,
56    data: null,
57    error: null
58};
59
60const reducer = createReducer({
61    [actionAsync.request]: (state, payload) => ({
62        ...state,
63        request: payload,
64        loading: true,
65        data: null,
66        error: null
67    }),
68    [actionAsync.ok]: (state, payload) => ({
69        ...state,
70        loading: false,
71        data: payload.response
72    }),
73    [actionAsync.error]: (state, payload) => ({
74        ...state,
75        loading: false,
76        error: payload.error
77    }),
78    [actionAsync.reset]: () => (defaultsState)
79} , defaultsState);
80
81

That's 3 lines against 78 lines, a good way to reduce boilerplate code.

Async Action Options

Here are all the options to configure an asynchronous action:

1const actionOptions = {
2  noRethrow: false,
3  request:{
4    callback: (dispatch, getState, ...args) => {
5    },
6    payloadReducer: (payload) => {
7      return payload
8    },
9    metaReducer: (meta) => {
10      return ASYNC_META.REQUEST
11    }
12  },
13  ok:{
14    callback: (dispatch, getState, ...args) => {
15    },
16    payloadReducer: (payload) => {
17      return payload
18    },
19    metaReducer: () => {
20      return ASYNC_META.OK
21    }
22  },
23  error:{
24    callback: (dispatch, getState, ...args) => {
25    },
26    payloadReducer: (payload) => {
27      return payload
28    },
29    metaReducer: () => {
30      return ASYNC_META.ERROR
31    }
32  }
33}
34
35const loginAction = createActionAsync('LOGIN', api, actionOptions);
36

Who is using this library ?

This library has been extracted originally from starhack.it, a React/Node Full Stack Starter Kit.