Last active
August 27, 2020 21:36
-
-
Save weeksie/04f41329d0015e2128209df9f9de7c3c to your computer and use it in GitHub Desktop.
Redux with custom middleware
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: | |
/// ... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()); |
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
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
tocamelCase
but case transform functions are pretty useful to have around anyway.