Skip to content

Instantly share code, notes, and snippets.

@tylerthebuildor
Forked from vjpr/README.md
Created December 16, 2015 01:17
Show Gist options
  • Save tylerthebuildor/48f3b8b3aaaf453c43f3 to your computer and use it in GitHub Desktop.
Save tylerthebuildor/48f3b8b3aaaf453c43f3 to your computer and use it in GitHub Desktop.
Reduce boilerplate in Redux

Reduce boilerplate in Redux

  • Create actions similar to Flummox.
  • Generate action ids.
  • Supports actions with promises, and therefore ES7 async.
//
// 4 different ways to write actions: ES7 Async/Await, Promises, Async Function, Synchronous.
//
import {createActions} from './helpers.js'
export const CounterActions = createActions({
async incrementAsync() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
let result = await promise
return result
},
incrementPromise() {
// Debug
const promise = new Promise( (resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
return {
types: ['INCREMENT_BEGIN', 'INCREMENT_SUCCESS', 'INCREMENT_FAILURE'],
promise,
}
},
incrementFunctionWithState() {
return (dispatch, getState) => {
const {counter} = getState()
console.log(dispatch)
if (counter % 2 === 0) return
dispatch(CounterActions.increment())
}
},
incrementFunction()) {
return dispatch => {
setTimeout(() => {
dispatch(CounterActions.increment())
}, 1000)
}
},
increment() {
return {}
},
})
import React from 'react';
import {Provider} from 'redux/react';
import {RouteHandler} from 'react-router'
import {createRedux, createDispatcher, composeStores} from 'redux';
import thunkMiddleware from 'redux/lib/middleware/thunk';
import {compose} from 'redux';
import {promiseMiddleware} from './helpers.js';
import * as stores from './store.js';
const store = composeStores(stores);
const dispatcher = createDispatcher(
store,
getState => [promiseMiddleware(), thunkMiddleware(getState)]
);
const redux = createRedux(dispatcher);
////////////////////////////////////////////////////////////////////////////////
// We use the above code - which this is shorthand for this, but adds our promise middleware.
//const redux = createRedux(stores)
////////////////////////////////////////////////////////////////////////////////
export default class App extends React.Component {
render() {
return (
<Provider redux={redux}>
{() =>
<RouteHandler/>
}
</Provider>
);
}
}
import React from 'react'
import App from './app.js'
React.render(<App/>, document.getElementById('body'))
import {createStore, getActionIds} from './helpers.js'
import {default as Immutable, Map, List} from 'immutable'
import {CounterActions} from './actions.js'
const actions = getActionIds(CounterActions)
const initialState = 0
export const counter = createStore(initialState, {
[actions.increment+'-SUCCESS']: (state, actions) => {
return state + 5
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment