redux-actions-async

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

redux-actions-async

★ 8 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

redux-actions-async

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README