Skip to content

Instantly share code, notes, and snippets.

@vjpr
Forked from skevy/gist:8a4ffc3cfdaf5fd68739
Last active February 4, 2016 21:29
Show Gist options
  • Save vjpr/c9c7cfe405fed8965a51 to your computer and use it in GitHub Desktop.
Save vjpr/c9c7cfe405fed8965a51 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
},
})
@Dr-Nikson
Copy link

Hello, @vjpr ! In your example you need to return a promise object from incrementPromise action (because types generates automatically in helpers::createActions).

I made some changes to avoid constants usage:

[actions.increment+'-SUCCESS']: (state, actions) => {
    return state + 5
  },

Now it looks like:

  // actions.incrementPromise.begin
  // actions.incrementPromise.success
  // actions.incrementPromise.failure
  [actions.incrementPromise.success]: (state, actions) => {
    return state + 5
  },

Can you check my fork, please? https://gist.github.com/iNikNik/3c1b870f63dc0de67c38

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