redux-thunk-action-reducer

Introduction

A simple wrapper for creating redux actions and reducers. The library makes creating and handling both asynchronous and synchronous actions easier. It's completely written, with type safety in mind, with typescript.

Actions/ Action Creator

Action creator can either create a synchronous action or an asynchronous action. For more general information about actions refer to redux docs

Asynchronous Action

Asynchronous Actions are actions that will invoke an api and are designed to work with libraries like redux-thunk or redux-saga.

Traditional way of creating asynchronous action

1import { api } from '../api'
2import { ACTION_TYPE, STARTED, SUCCEEDED, FAILURE } from '../constants'
3
4const action = (dispatch) => {
5	(request) => {
6		dispatch({ type: ACTION_TYPE, status: STARTED, request })
7		api(request).then((response) => {
8			dispatch({ type: ACTION_TYPE, status: SUCCEEDED, request, response})
9		}).catch((error)=>{
10			dispatch({ type: ACTION_TYPE, status: FAILURE, request, error})
11		})
12	}
13}

can be replaced with single line (or two lines)

1import { createAsyncAction } from 'redux-async-action-reducer'
2import { api } from '../api'
3import { ACTION_TYPE } from '../constants'
4
5
6const action = createAsyncAction(ACTION_TYPE, api)
7//with typescript
8const action = createAsyncAction<ACTION_TYPE, ApiResponseObj>(ACTION_TYPE, api)

Synchronous Action

A synchronous action instantly returns an Action object (an object with type attribute and a string type value)

Traditional way of creating synchronous action

1import { ACTION_TYPE } from '../constants'
2const action = (request) => ({
3	type: ACTION_TYPE, request // payload is most common used key.
4})

can be replaced with single line

1import { createSimpleAction } from 'redux-async-action-reducer'
2import { ACTION_TYPE } from '../constants'
3
4const action = createSimpleAction(ACTION_TYPE);
5//with typescript
6const action = createSimpleAction<ACTION_TYPE, RequestType>(ACTION_TYPE);
7

Use of request and response is convenient and consistent across synchronous and asynchronous actions rather than using payload for request

Reducers

Reducer can also be either synchronous or asynchronous. Asynchronous reducer need an asynchronous action while synchronous reducer can act up on both synchronous and asynchronous actions. For more general information about reducers refer to redux docs

Traditional way of creating a reducer is using switch cases

1const reducer  = (state = initialState, action){
2	switch(action.type){
3		//All synchronous and asynchronous reducers goes here
4	}
5}

would be replaced with something like this

1import { createReducer } from 'redux-async-action-reducer';
2const reducer = createReducer(initialState,
3  [/*list of synchronous reducer*/], [/*list of asynchronous reducers*/]
4)

NOTE: As a side effect a synchronous reducer acting upon asynchronous action will be called 3 times. Future version will support synchronous action status reducer

Asynchronous Reducer

Traditional way of creating asynchronous reducer

1import { ACTION_TYPE, STARTED, SUCCEEDED, FAILURE } from '../constants'
2
3const actionTypeReducer = (state, action){
4	if(action.status === STARTED){
5		return {...state, working: true, failure: false, completed: false, started: new Date(), finished: undefined}
6	} else if(action.status === SUCCEEDED){
7		return {...state, working: false, failure: false, completed: true, store: action.response}
8	} else if( action.status === FAILURE){
9		return {...state, working: false, failure: true, completed: false, finished: new Date()}
10	}
11	return state
12}
13const reducer  = (state = initialState, action) => {
14	switch(action.type){
15		case 'ACTION_TYPE': state = actionTypeReducer(state, action)
16		//
17		// more switch cases for reducers
18		//
19	}
20	return state
21}

can be replaced with

1import { createReducer, asyncReducer } from 'redux-async-action-reducer';
2
3import { ACTION_TYPE } from '../constants'
4const reducer = createReducer(initialState, [/*synchronous reducers*/],
5  [asyncReducer(ACTION_TYPE), /*more reducers*/]
6)
7

Synchronous Reducer

Traditional way of creating synchronous reducer

1import { ACTION_TYPE } from '../constants'
2
3const actionTypeReducer = (state, action){
4	return {...state, request: action.request}
5}
6const reducer  = (state = initialState, action) => {
7	switch(action.type){
8		case 'ACTION_TYPE': actionTypeReducer(state, action)
9		//
10		// more switch cases for reducers
11		//
12	}
13}

can be replaced with

1import { createReducer, syncReducer } from 'redux-async-action-reducer';
2import { ACTION_TYPE } from '../constants'
3
4const reducer = createReducer(initialState,
5  [syncReducer(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
6)

Array Reducers

When a store is an array object we can use array reducer. It supports CLUD (Load instead of Read) apis. Both synchronous and asynchronous support full CLUD operations on array reducers.

Create

Adding an element into the array

Synchronous

1import { arraySyncCreateReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arraySyncCreateReducer<ACTION_TYPE, RequestType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This will add request object into array

Asynchronous

1import { arrayAsyncCreateReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arrayAsyncCreateReducer<ACTION_TYPE, RequestType, ResponseType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This will add response object into array

NOTE: If your create API does not give response object which need to be added, change the response object to what ever you want to add

Read/Load

Load all elements into the array

Synchronous

1import { arraySyncLoadReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arraySyncLoadReducer<ACTION_TYPE, RequestType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This will load RequestType[] into store

Asynchronous

1import { arrayAsyncLoadReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arrayAsyncLoadReducer<ACTION_TYPE, RequestType, ResponseType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This will load ResponseType[] into store

Update

Load all elements into the array

Synchronous

1import { arraySyncUpdateReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arraySyncUpdateReducer<ACTION_TYPE, RequestType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This will need a request array with 2 elements with first element original object and second object what the values to be updated to 
7//eg. the action would look something like this
8import { createSimpleAction } from 'redux-async-action-reducer'
9const action = createSimpleAction<ACTION_TYPE, RequestType>(ACTION_TYPE);
10const updateArray: RequestType[] = [originalObject, updatedObject]
11action(updateArray) //store.dispatch(action(updateArray))
12

Asynchronous

1import { arrayAsyncUpdateReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arrayAsyncLoadReducer<ACTION_TYPE, RequestType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This expect action to dispatch request with an array [originalObject, updatedObject] while response will give you the updatedObject. 
7import { createAsyncAction } from 'redux-async-action-reducer'
8import { api } from '../api'
9const action = createAsyncAction<ACTION_TYPE, RequestType>(ACTION_TYPE, api);
10const updateArray: RequestType[] = [originalObject, updatedObject]
11action(updateArray) //store.dispatch(action(updateArray))

Delete

Load all elements into the array

Synchronous

1import { arraySyncDeleteReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arraySyncDeleteReducer<ACTION_TYPE, RequestType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// This will load RequestType[] into store

Asynchronous

1import { arrayAsyncDeleteReducer } from 'redux-async-action-reducer'
2
3const reducer = createReducer(initialState,
4  [arrayAsyncDeleteReducer<ACTION_TYPE, RequestType>(ACTION_TYPE), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6// Action need to be invoked with request object of the element which needs to be removed from the array

Status Reducer

Status reducer is reducer who acts upon on status change of all or a list of action types. Traditional way of doing it

1import { ACTION_TYPE, STARTED, SUCCEEDED, FAILURE } from '../constants'
2
3const actionTypeReducer = (state, action){
4	//for all actions remove the following line
5	if(['ACTION_TYPE1','ACTION_TYPE2', 'ACTION_TYPE3'/*etc*/].indexOf(action.type) === -1) {
6		return state
7	} else if(action.status === STARTED){
8		return {...state, working: true, failure: false, completed: false, started: new Date(), finished: undefined}
9	} else if(action.status === SUCCEEDED){
10		return {...state, working: false, failure: false, completed: true, store: action.response}
11	} else if( action.status === FAILURE){
12		return {...state, working: false, failure: true, completed: false, finished: new Date()}
13	} else {
14		return state
15	}
16}
17const reducer  = (state = initialState, action) => {
18	actionTypeReducer(state, action)
19	switch(action.type){
20		//
21		// more switch cases for reducers
22		//
23	}
24}

can be replaced with

1import { arrayAsyncLoadReducer } from 'redux-async-action-reducer'
2type ACTION_TYPE = 'ACTION_TYPE1' | 'ACTION_TYPE2' | 'ACTION_TYPE3' //eg only
3const reducer = createReducer(initialState,
4  [asyncReducer<ACTION_TYPE[], RequestType, ResponseType>(['ACTION_TYPE1','ACTION_TYPE2','ACTION_TYPE3']), /*more reducers*/],[/*asynchronous reducers if needed*/]
5)
6
7//or all for all actions
8const reducer = createReducer(initialState,
9  [asyncReducer<ACTION_TYPE, RequestType, ResponseType>(), /*more reducers*/],[/*asynchronous reducers if needed*/]
10)
11

See also

The library takes starting inspiration from redux-actions.