Simple, yet effective tool for removing Redux boilerplate code.
The redux-routines is utility library for redux whose main goal is simplicity and boilerplate reduction.
npm install --save redux-routines- Predefined actions creators and action types for common async tasks in a single object called "routine"
- FSA compatible – based on redux-actions library
import { createStore } from 'redux'
import { createRoutine } from 'redux-routines'
// Create a new "fetchUsers" routine
const fetchUsers = createRoutine('FETCH_USERS')
// Created action types
fetchUsers.TRIGGER === 'FETCH_USERS_TRIGGER' // true
fetchUsers.REQUEST === 'FETCH_USERS_REQUEST' // true
fetchUsers.SUCCESS === 'FETCH_USERS_SUCCESS' // true
fetchUsers.FAILURE === 'FETCH_USERS_FAILURE' // true
fetchUsers.FULFILL === 'FETCH_USERS_FULFILL' // true
// Available actions
const payload = {}
fetchUsers.trigger(payload)
// { type: 'FETCH_USERS_TRIGGER', payload: {} }
fetchUsers.request(payload)
// { type: 'FETCH_USERS_REQUEST', payload: {} };
fetchUsers.success(payload)
// { type: 'FETCH_USERS_SUCCESS', payload: {} };
fetchUsers.failure(payload)
// { type: 'FETCH_USERS_FAILURE', payload: {} };
fetchUsers.fulfill(payload)
// { type: 'FETCH_USERS_FULFILL', payload: {} };
// Initial state of reducer
const initialState = {
isProcessing: false,
isFetching: false,
data: [],
error: null
}
// The reducer
function users(state = initialState, action) {
switch (action.type) {
case fetchUsers.TRIGGER:
return { ...state, isProcessing: true }
case fetchUsers.REQUEST:
return { ...state, isFetching: true }
case fetchUsers.SUCCESS:
return { ...state, isFetching: false, data: action.payload }
case fetchUsers.FAILURE:
return { ...state, isFetching: false, error: action.payload }
case fetchUsers.FULFILL:
return { ...state, isProcessing: false }
}
}
// The store
const store = createStore(users)
store.subscribe(() => console.log(store.getState()))
// Describe state changes with routine actions
store.dispatch(fetchUsers.trigger())
// { isProcessing: true, isFetching: false, data: [], error: null }
store.dispatch(fetchUsers.request())
// { isProcessing: true, isFetching: true, data: [], error: null }
store.dispatch(fetchUsers.success([1, 2]))
// { isProcessing: true, isFetching: false, data: [ 1, 2 ], error: null }
store.dispatch(fetchUsers.fulfill())
// { isProcessing: false, isFetching: false, data: [ 1, 2 ], error: null }MIT