https://github.com/defint/redux-actions-async

A small library that facilitates the development of asynchronous actions in the redux ecosystem. Without copy-paste code and without headache.
https://github.com/defint/redux-actions-async

actions normalizr react redux reselect

Last synced: 16 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/defint/redux-actions-async
• Owner: defint
• License: mit
• Created: 2018-03-30T20:08:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-28T06:50:59.000Z (over 6 years ago)
• Last Synced: 2024-10-10T18:27:19.490Z (29 days ago)
• Topics: actions, normalizr, react, redux, reselect
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/redux-actions-async
• Size: 35.2 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

    

    ```