1.0.0 • Published 7 years ago
redux-star v1.0.0
redux-star
Redux star allows you to use ES7 generators in your redux action creators. This gives you more flexibility to add async business logic and build complex action creators or even graphs of action creators.
Example
const ActionTypes = {
GET_PAGE_START: 'GET_PAGE_START',
GET_PAGE_END: 'GET_PAGE_END',
};
const ActionCreators = {
// Action creators can be regular generators...
getPageStart: function* () {
yield { type: ActionTypes.GET_PAGE_START };
// could have more yields in here too
},
// ...plain actions...
getPageEnd({ articles, success }) {
return {
type: ActionTypes.GET_PAGE_END,
articles,
success
}
},
// ...or async generators
triggerGetPage: async function* () {
yield ActionCreators.getPageStart();
try {
let articles = await fetch(`https://jsonplaceholder.typicode.com/posts`);
articles = await articles.json();
yield ActionCreators.getPageEnd({ articles, success: true });
} catch (e) {
yield ActionCreators.getPageEnd({ success: false });
}
},
};
That's it! Now you can use async/await easily, and remove the need to be returning functions from your action creators (like in redux-thunk).
Configuration
npm install redux-star
Note: you'll need the Babel stage-1
preset for generator support for redux-star to work. As of
writing, you will also need the babel-polyfill
to get support in some browsers.
Now add the middleware to your redux store config:
import starMiddleware from 'redux-star';
const store = createStore(
Reducer,
compose(
applyMiddleware(starMiddleware),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
1.0.0
7 years ago