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';
 
// create a redux manager instance
export const getContentManager = createReduxManager('GET_CONTENT');
 
// example redux thunk which dispatches actions
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));
      });
  };
}
 
// example reducer
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; // plain action types

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

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

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' }));
// { type: 'CONTENT_FETCH_IN_PROGRESS', 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

import { makeActionCreator } from 'another-redux-manager';
 
const inProgress = makeActionCreator('GET_CONTENT_IN_PROGRESS', 'payload');