https://github.com/joshdover/redux-star

Redux middleware for easy-to-read, async action creators
https://github.com/joshdover/redux-star

Last synced: 25 days ago
JSON representation

Redux middleware for easy-to-read, async action creators

• Host: GitHub
• URL: https://github.com/joshdover/redux-star
• Owner: joshdover
• Created: 2017-09-02T19:46:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-02T20:00:14.000Z (over 7 years ago)
• Last Synced: 2024-08-09T08:26:59.109Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.95 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

```js

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).

[See the complete demo](https://github.com/joshdover/redux-star-demo/blob/master/src/index.js).

## 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

  )

);

```