Skip to content

Instantly share code, notes, and snippets.

@skevy
Last active February 4, 2017 04:59
Show Gist options
  • Star 26 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save skevy/8a4ffc3cfdaf5fd68739 to your computer and use it in GitHub Desktop.
Save skevy/8a4ffc3cfdaf5fd68739 to your computer and use it in GitHub Desktop.
Redux with reduced boilerplate

Note

I would recommend @acdlite's redux-actions over the methods suggested in this Gist.

The methods below can break hot-reloading and don't support Promise-based actions.

Even though 'redux-actions' still uses constants, I've come to terms with the fact that constants can be good, especially in bigger projects. You can reduce boilerplate in different places, as described in the redux docs here: http://gaearon.github.io/redux/docs/recipes/ReducingBoilerplate.html


Redux is super lightweight...so it may be useful to add some helper utils on top of it to reduce some boilerplate. The goal of Redux is to keep these things in user-land, and so most likely these helpers (or anything like them) wouldn't make it into core.

It's important to note that this is just ONE (and not particularly thoroughly tested) way to accomplish the goal of reducing boilerplate in Redux. It borrows some ideas from Flummox and the way it generates action creator constants.

This will evolve, I'm sure, as time goes on and as Redux's API changes.

Some helper functions to reduce some boilerplate in Redux:

import _ from 'lodash';
import uniqueId from 'uniqueid';

// Create actions that don't need constants :)
export const createActions = (actionObj) => {
  const baseId = uniqueId();
  return _.zipObject(_.map(actionObj, (actionCreator, key) => {
    const actionId = `${baseId}-${key}`;
    const method = (...args) => {
      const result = actionCreator(...args);
      return {
        type: actionId,
        ...(result || {})
      };
    };
    method._id = actionId;
    return [key, method];
  }));
};

// Get action ids from actions created with `createActions`
export const getActionIds = (actionCreators) => {
  return _.mapValues(actionCreators, (value, key) => {
    return value._id;
  });
};

// Replace switch statements in stores (taken from the Redux README)
export const createStore = (initialState, handlers) => {
  return (state = initialState, action) =>
    handlers[action.type] ?
      handlers[action.type](state, action) :
      state;
};

They can be used like this:

Actions

import {createActions} from 'lib/utils/redux';

export const SocialPostActions = createActions({
  loadPosts(posts) {
    return { posts };
  }
});

Stores

import {default as Immutable, Map, List} from 'immutable';
import {createStore, getActionIds} from 'lib/utils/redux';

import {SocialPostActions} from 'lib/actions';

const initialState = Map({
  isLoaded: false,
  posts: List()
});

const actions = getActionIds(SocialPostActions);

export const posts = createStore(initialState, {
  [actions.loadPosts]: (state, action) => {
    return state.withMutations(s =>
      s.set('isLoaded', true).set('posts', Immutable.fromJS(action.posts))
    );
  }
});
@faassen
Copy link

faassen commented Jun 25, 2015

Anyway, to get started I think it would make sense to put this code (and the worked out example in the other gist) in a git repo. @vjpr, do you need help with this? I'd also like to help out writing tests if needed.

@skevy
Copy link
Author

skevy commented Jun 29, 2015

Not sure why I wasn't notified on comments on this.

@vjpr thanks for your examples. I had run into this problem of it not supporting promises as well...and I ended up with something similar to what you did.

@cassus
Copy link

cassus commented Jul 5, 2015

It would be great to have this on npm, also maybe under the redux github org.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment