Skip to content

Instantly share code, notes, and snippets.

@weeksie
Last active August 27, 2020 21:36
Show Gist options
  • Save weeksie/04f41329d0015e2128209df9f9de7c3c to your computer and use it in GitHub Desktop.
Save weeksie/04f41329d0015e2128209df9f9de7c3c to your computer and use it in GitHub Desktop.
Redux with custom middleware
import { types, actions } from './actions';
import apolloClient from '../lib/apolloClient';
const client = apolloClient();
const apiQuery = store => next => action => {
next(action);
if (action.type.includes(types.API_QUERY)) {
client.query(action.payload)
.then(result => store.dispatch(actions.apiResponded(result, action.meta)))
.catch(error => store.dispatch(
actions.apiResponded(new Error(error), {...action.meta, error: true })
));
}
};
// these are almost exactly the same, leaving as-is for now but is a
// candidate for refactor
const apiMutation = store => next => action => {
next(action);
if (action.type.includes(types.API_MUTATION)) {
client.mutate(action.payload)
.then(result => store.dispatch(actions.apiResponded(result, action.meta)))
.catch(error => store.dispatch(
actions.apiResponded(new Error(error), {...action.meta, error: true })
));
}
};
const pending = {};
const debounce = store => next => action => {
const { debounce } = action.meta;
if(!debounce) {
next(action);
return;
}
if (pending[action.type]) {
clearTimeout(pending[action.type]);
}
pending[action.type] = setTimeout(() => {
delete pending[action.type];
next(action);
}, debounce);
};
export default [debounce, apiQuery, apiMutation];
function createActions(actionTypes, { entity = false, mapToTypes = {} } = {}) {
const types = {};
const actions = {};
const namespaces = {};
for (let property of actionTypes) {
let typeBucket = types;
let actionBucket = actions;
let [ns, type] = property.split('/');
[ns, type] = type ? [ns, type] : [null, ns]; // handle types without namespaces
const actionName = camelCase(type);
if (ns) {
const prefix = camelCase(ns);
namespaces[ns] = ns;
actions[prefix] = actions[prefix] || {};
types[prefix] = types[prefix] || {};
typeBucket = types[prefix];
actionBucket = actions[prefix];
// NB: this will auto generate core types for every namespace in
// the action list. If you don't want core types mapped onto a
// namespace, declare it elsewhere.
for (let k in mapToTypes) {
let t = mapToTypes[k];
typeBucket[t] = `${ns}/${t}`;
};
}
typeBucket[type] = property;
actionBucket[actionName] = (payload, { error, ...meta } = {}) => ({
type: entity ? `${meta.entity}/${property}` : property,
ns,
payload,
meta,
error,
});
};
return { namespaces, types, actions };
}
import { camelCase } from 'camel-case';
export function createActions(actionTypes) {
const types = {};
const actions = {};
actionTypes.forEach(property => {
types[property.replace('/', '_')] = property;
actions[camelCase(property)] = x => ({ type: property, payload: x });
});
return { types, actions };
}
export const { types, namespaces, actions } = createActions([
// commands
'QUIZZES/NEW',
'QUIZZES/FETCH',
]);
function quizzesReducer(state, { type, payload }) {
const t = types.quizzes;
switch(type) {
case t.NEW:
/// ...
}
const { actions, types } = createActions([
'SAVING_WIDGET',
'SAVED_WIDGET',
]);
function reducer(state, { type, payload }) {
switch(type) {
case types.SAVING_WIDGET:
return {
...state,
loading: true,
};
case types.SAVED_WIDGET:
return {
...state,
loading: false,
};
default:
return state;
}
// elsewhere
dispatch(actions.savingWidget());
@weeksie
Copy link
Author

weeksie commented Apr 27, 2020

Just putting this up here because there's no reason to use an npm package for stuff like this. Everybody's free to copy paste/modify as needed.

Obviously for this to work you need a function for transforming CONSTANT_CASE to camelCase but case transform functions are pretty useful to have around anyway.

@weeksie
Copy link
Author

weeksie commented Jul 27, 2020

Expanded this example a bit to illustrate adding namespaces and metadata to types, as well as integrating that with middleware for handling async and effects.

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