Wondering what’s next for npm?Check out our public roadmap! »

redux-actions-async

0.3.2 • Public • Published

Redux async actions

A small library that facilitates the development of asynchronous actions in the redux ecosystem. Without copy-paste code and without headache.

Installation

  • npm: npm install --save redux-actions-async

  • yarn: yarn add redux-actions-async

Basic usage

  1. Create your async function, for example to make request with axios:

    import axios from 'axios';
    
    export const fetchPlanet = () =>
      axios.request({
        url: 'https://api.nasa.gov/planetary/apod',
        method: 'get',
      });
    
  2. Create the first async action creator:

    import { createAsyncAction } from 'redux-actions-async';
        
    export const nasaFetchPlanet = createAsyncAction('NASA_DATA_FETCH', fetchPlanet);
    
  3. Create async reducer:

    import { handleAsyncActions } from 'redux-actions-async';
    
    export default handleAsyncActions(nasaFetchPlanet);
    
  4. Create selectors:

    import { createAsyncSelector, createLoadingSelector } from 'redux-actions-async';
    
    const _selector = state => state.nasa;
    export const dataSelector = createAsyncSelector(_selector);
    export const loadingSelector = createLoadingSelector(_selector);
    
  5. Using in container:

    import { connect } from 'react-redux';
    import * as actionCreators from '../actionCreators';
    import * as selectors from '../selectors';
    
    const mapStateToProps = state => ({
      loading: selectors.loadingSelector(state),
      planet: selectors.dataSelector(state),
    });
    
    const mapDispatchToProps = {
      nasaFetchPlanet: actionCreators.nasaFetchPlanet,
    };
    
    export default connect(mapStateToProps, mapDispatchToProps)(App);
    
    

Basic usage with nested reducers

    import { handleAsyncActions } from 'redux-actions-async';
    import { combineReducers } from 'redux';
    
    export default combineReducers({
      main: handleAsyncActions(nasaFetchPlanet),
      another: handleAsyncActions(nasaFetchAnotherPlanet),
    });

Usage with normalizr

  1. Create function to make request (same as basic usage):

    import axios from 'axios';
    
    export const fetchCuriosityPhotos = () =>
      axios.request({
        url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/',
        method: 'get',
      });
    
  2. Define schema:

    import { schema } from 'normalizr';
    
    const photo = new schema.Entity('photo');
    
    export default photo;
    
    
  3. Create the first async action creator:

    import { createAsyncAction } from 'redux-actions-async';
    import photo from '../schemas/photo';
        
    export const nasaFetchCuriosity = createAsyncAction(
      'NASA_CURIOSITY_FETCH',
      fetchCuriosityPhotos,
      data => normalize(data.photos, [photo])
    );    
    
  4. Create async reducer (same as basic usage):

    import { handleAsyncActions } from 'redux-actions-async';
    
    export default handleAsyncActions(nasaFetchCuriosity);
    
  5. Create selectors:

    import { createAsyncSelector, createLoadingSelector } from 'redux-actions-async';
    import photo from '../schemas/photo';
    
    const _selector = state => state.nasaCuriosity;
    export const dataSelector = createAsyncSelector(_selector, [photo]);
    export const loadingSelector = createLoadingSelector(_selector);
    
  6. Using in container:

    import { connect } from 'react-redux';
    import * as actionCreators from '../actionCreators';
    import * as selectors from '../selectors';
    
    const mapStateToProps = state => ({
      loading: selectors.loadingSelector(state),
      curiosity: selectors.dataSelector(state),
    });
    
    const mapDispatchToProps = {
      nasaFetchCuriosity: actionCreators.nasaFetchCuriosity,
    };
    
    export default connect(mapStateToProps, mapDispatchToProps)(App);
    
    

Install

npm i redux-actions-async

DownloadsWeekly Downloads

144

Version

0.3.2

License

MIT

Unpacked Size

30.7 kB

Total Files

13

Last publish

Collaborators

  • avatar