OOP Redux

reducer-helper.js

function toCamel(string){
	return string.toLowerCase().replace(/(\_[a-z])/g, function($1){return $1.toUpperCase().replace('_','');});
}

/**
 * Reducer class base
 */
export const Reducer = function(){
  return (state, action) => {
    if (!state) {
      // Initial state a property on the class, and can be defined as an instance variable or a getter
      state = this.initialState;
    }
    // Action handler methods are defined as onActionAsCamelCase
    // this means that action.type must be in standard underscore naming fashion
    let handler = toCamel('ON_'+action.type);
    if (this[handler]) {
      // return a new object with the modified state
      return this[handler](state, action);
    }
    return state
  }
}

REDUX_CLASS_REDUCER

Simple function created so you can make reducers that are classes in ES6.

I did this because I found the switch-statement approach to be rather messy 
once the action handling within the reducer gets substantially large.

xp_helper.js

import { listen, Reducer } from '../reducer-helper';

/**
 * A store of all the paths of files relative to the assetsDirectory
 */
class FilesReducer extends Reducer {
  get initialState() {
    return {
      assetsDirectory: '',
      adjectives: '',
      monsters: '',
      items: '',
      modifiers: '',
    }
  }

  onChangeAssetsDirectory(state, {assetsDirectory}){
    return {
      ...state,
      assetsDirectory,
      adjectives: assetsDirectory + '/content/adjectives.csv',
      monsters: assetsDirectory + '/content/monsters.json',
      quests: assetsDirectory + '/content/quests.json',
      items: assetsDirectory + '/content/items.json',
    };
  }
}

export const actions = {
  loadResources(assetsDirectory) {
    return { type: 'CHANGE_ASSETS_DIRECTORY', assetsDirectory }
  }
}

export const reducers = new FilesReducer(); 

xp_react.js

import { listen, Reducer } from '../reducer-helper';

/**
 * A store of all the paths of files relative to the assetsDirectory
 */
const initialState = {
  assetsDirectory: '',
  adjectives: '',
  monsters: '',
  items: '',
  modifiers: '',
}

const reducer = function(state = initialState, action) {
  let assetsDirectory = undefined;
  switch(action.type) {
    case 'CHANGE_ASSETS_DIRECTORY':
      assetsDirectory = action.assetsDirectory;
      return {
        ...state,
        assetsDirectory,
        adjectives: assetsDirectory + '/content/adjectives.csv',
        monsters: assetsDirectory + '/content/monsters.json',
        quests: assetsDirectory + '/content/quests.json',
        items: assetsDirectory + '/content/items.json',
      });
    default:
      return state;
  }
}

const actions = {
  loadResources(assetsDirectory) {
    return { type: 'CHANGE_ASSETS_DIRECTORY', assetsDirectory }
  }
}

Simple function created so you can make reducers that are classes in ES6.

I did this because I found the switch-statement approach to be rather messy once the action handling within the reducer gets substantially large.