- Generate action ids.
- Supports actions with promises, and therefore ES7 async.
-
-
Save Dr-Nikson/3c1b870f63dc0de67c38 to your computer and use it in GitHub Desktop.
This file contains hidden or 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 {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, | |
| } | |
| }, | |
| incrementFunction() { | |
| return (dispatch, getState) => { | |
| const {counter} = getState() | |
| console.log(dispatch) | |
| if (counter % 2 === 0) return | |
| dispatch(CounterActions.increment()) | |
| } | |
| }, | |
| incrementAnotherAction()) { | |
| return dispatch => { | |
| setTimeout(() => { | |
| dispatch(CounterActions.increment()) | |
| }, 1000) | |
| } | |
| }, | |
| decrement() { | |
| return {} | |
| }, | |
| }) |
This file contains hidden or 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 React from 'react'; | |
| import {Provider} from 'redux/react'; | |
| import {RouteHandler} from 'react-router' | |
| //////////////////////////////////////////////////////////////////////////////// | |
| // Redux | |
| //////////////////////////////////////////////////////////////////////////////// | |
| 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> | |
| ); | |
| } | |
| } |
This file contains hidden or 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 {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 | |
| }, | |
| }) |
Author
Hello @babsonmatt ! Thanks for the feedback, but I just forked @vjpr's gist)
async incrementAsync() returns a promise object. So, promise middleware will dispatch 3 types of action (begin, success, failure). But you can't handle these actions without asyncAction decorator.
Yep, it's by design:
https://gist.github.com/iNikNik/3c1b870f63dc0de67c38#file-helpers-js-L37-L46
https://gist.github.com/iNikNik/3c1b870f63dc0de67c38#file-helpers-js-L52-L56
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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?