Another Redux Manager

Yes yet another attempt to reduce boilerplate for redux whilst still keeping granular control over actions and reducers.

Why

Reduces boilerplate

No overblown middleware required

Less opinionated

plays nice with existing codebase (use as much or as little as your want)

More control over shape of your store and reducers

Dependencies

axios

Install

$ npm i another - redux - manager axios

Example

import { createReduxManager } from ' another-redux-manager ' ; export const getContentManager = createReduxManager ( ' GET_CONTENT ' ) ; export function getContent ( ) { return dispatch => { dispatch ( getContentManager . inProgress ( ) ) ; return getContentManager . fetch ( { url : ' /some-endpoint ' } ) . then ( data => { return dispatch ( getContentManager . success ( data ) ) ; } ) . catch ( error => { return dispatch ( getContentManager . failure ( error ) ) ; } ) ; } ; } const INITIAL_STATE = { [ getContentManager . name ] : { status : getContentManager . actionTypes . initial , error : null results : null } , } ; function contentReducer ( state = INITIAL_STATE , action ) { switch ( action . type ) { case getContentManager . actionTypes . initial : return getContentManager . reducerMethods . initial ( state , INITIAL_STATE [ getContentManager . name ] . results ) ; case getContentManager . actionTypes . inProgress : return getContentManager . reducerMethods . inProgress ( state , action ) ; case getContentManager . actionTypes . success : return getContentManager . reducerMethods . success ( state , action ) ; case getContentManager . actionTypes . failure : return getContentManager . reducerMethods . failure ( state , action ) ; default : return state ; } }

NOTE: The default success reducer merges the results object with the data you fetch. If you require a full replace then use the advanced reducer configuration below.-

Getting Started

const contentReduxManager = createReduxManager ( { name : ' CONTENT ' } ) ;

returns the following object:

{ name : ' CONTENT ' , actionTypes : { initial : ' CONTENT_FETCH_INITIAL ' , inProgress : ' CONTENT_FETCH_IN_PROGRESS ' , success : ' CONTENT_FETCH_SUCCESS ' , failure : ' CONTENT_FETCH_FAILED ' } , actionTypeKeys : { CONTENT_FETCH_INITIAL : ' CONTENT_FETCH_INITIAL ' , CONTENT_FETCH_IN_PROGRESS : ' CONTENT_FETCH_IN_PROGRESS ' , CONTENT_FETCH_SUCCESS : ' CONTENT_FETCH_SUCCESS ' , CONTENT_FETCH_FAILED : ' CONTENT_FETCH_FAILED ' } , actions : { initial : ( ) => { ... } , inProgress : ( ) => { ... } , success : ( ) => { ... } , faulure : ( ) => { ... } , } , reducerMethods : { initial : ( ) => { ... } , inProgress : ( ) => { ... } , success : ( ) => { ... } , faulure : ( ) => { ... } , } , initial : ( ) => { ... } , inProgress : ( ) => { ... } , success : ( ) => { ... } , faulure : ( ) => { ... } , }

Access ActionCreators

const { initial , inProgress , success , failure } = contentReduxManager . actions ; or also available as shorthand references : const { initial , inProgress , success , failure } = contentReduxManager ;

Access Action types

const { initial , inProgress , success , failure } = contentReduxManager . actionTypes ; const { CONTENT_FETCH_INITIAL , CONTENT_FETCH_IN_PROGRESS , CONTENT_FETCH_SUCCESS , CONTENT_FETCH_FAILED } = contentReduxManager . actionTypeKeys ;

Access Reducer Methods (for use in your switch statement in your reducer)

const { initial , inProgress , success , failure } = contentReduxManager . reducerMethods ;

You can also define multiple arguments to your actions (if you need to)

const contentReduxManager = createReduxManager ( { name : ' CONTENT ' , resultsPropsName : ' results ' } , ' payload ' , ' anotherProp ' ) ; console . log ( actions . inProgress ( { payload : ' test ' , anotherProp : ' test ' } ) ) ;

Usage

Create a redux helper

const contentReduxManager = createReduxManager ( { name : ' CONTENT ' , argNames : [ ' payload ' ] , resultsPropsName : ' results ' , reducerMethods : ( ) => { } } ) ;

Properties:

prop desc name unique prefix for actions and reducers (RECOMMENDED: all uppercase and separated by underscore to match async postfixes) argNames array of argument names for actions (OPTIONAL: defaults to ['payload']) resultsPropsName name of property in the reducer to place fetched data (OPTIONAL: defaults to ['results']) reducerMethods function that allows customising of shape of reducer (OPTIONAL: see advanced usage)

Call async http endpoint (axios)

const result = await contentReduxManager . fetch ( { query : ' /some-endpoint ' } ) ;

prop desc type 'POST', 'DELETE', 'PUT', 'PATCH' .. defaults to 'GET' logger your choice of logging util. Must implement logger.error() method. Defaults to console.error config axios config for post params, headers etc.. name used when logging errors. outputs 'Fetch Failed

Advanced Usage

by default the shape of each reducer method looks something like:

const makeReducerMethods = ( reduxManager , resultsPropName ) => { return { initial : ( state , initialData ) => { return { ... state , ... { [ reduxManager . name ] : { ... { [ resultsPropName ] : initialData , status : reduxManager . actionTypes . initial , error : null } } } } ; } , success : ( state , action ) => { return { ... state , ... { [ reduxManager . name ] : { ... { [ resultsPropName ] : { ... state [ reduxManager . name ] [ resultsPropName ] , ... action . payload } , status : reduxManager . actionTypes . success , error : null } } } } ; } , inProgress : state => { return { ... state , ... { [ reduxManager . name ] : { ... state [ reduxManager . name ] , ... { status : reduxManager . actionTypes . inProgress , error : null } } } } ; } , failure : ( state , action ) => { return { ... state , ... { [ reduxManager . name ] : { ... state [ reduxManager . name ] , ... { status : reduxManager . actionTypes . failure , error : action . payload } } } } ; } } ; } ; export { makeReducerMethods } ;

However if you require custom shape for your state you can pass your own in as a property to the createReduxManager method

const makeReducerMethods = ( reduxManager , resultsPropName ) => { return { success : ( state , action ) => { return { ... state , ... { [ resultsPropName ] : action . payload , [ reduxManager . name ] : { status : reduxManager . actionTypes . success , error : null } } } ; } , inProgress : ( state , action , initial ) => { return { ... state , ... { [ resultsPropName ] : initial , [ reduxManager . name ] : { status : reduxManager . actionTypes . inProgress , error : null } } } ; } , failure : ( state , action , initial ) => { return { ... state , ... { [ resultsPropName ] : initial , [ reduxManager . name ] : { status : reduxManager . actionTypes . failure , error : action . payload } } } ; } } ; } ; export const getContentReduxManager = createReduxManager ( { name : ' GET_CONTENT ' , reducerMethods : makeReducerMethods } ) ;

You can also create a single action creator