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.
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';
export const getActionIds = (actionCreators) => {
return _.mapValues(actionCreators, (value, key) => {
return value._id;
});
};
export const createStore = (initialState, handlers) => {
return (state = initialState, action) =>
handlers[action.type] ?
handlers[action.type](state, action) :
state;
};
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];
}));
};They can be used like this:
import {createActions} from 'lib/utils/redux';
export const SocialPostActions = createActions({
loadPosts(posts) {
return { posts };
}
});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))
);
}
});
@iNikNik thanks for the great example. I'm having an issue using async/await (as provided in your first example). It seems that the async begin/success/failure types don't get added unless @AsyncAction() is used. Is this by design? It seems without it there's no way to know the function is async without knowing the result of the function and testing for Promise, but by that point the actionCreator has already been setup.
Any suggestions?