Tutorial

For example you can use this files structure.

├── src/  
|   ├── reducers  
|   |   ├── products-reducer.js  
|   ├── containers  
|   |   ├── ProductsContainer.js  
|   ├── pages  
|   |   ├── Products.js
|   ├── services  
|   |   ├── api
|    |    |    ├── ProductsAPI.js
└── App.js

App.js The first you need initialize global settings, add this into your app.js file

import RESTService from 'rest-redux-actions';

RESTService.init({  
  headers: {}, // Your App headers here default {'Accept': 'application/json', 'Content-Type': 'application/json'}
  baseUrl: '', // Your App base url here
  apiUrl: '', //  Your App API url here
  applicationId: 'APP_ID', // Your App application id name (optional), default null,
  fetchTimeOut: 60 * 1000, // Request time out default 1m
  timeOutMessage: 'Request timed out',
  token: '' // The authentification token name
});

For save token you can use this static method

RESTSerivece.saveToken('---token---');

ProductsAPI.js

import RESTService from 'rest-redux-actions';

const rest = new RESTService();

export const getProducts = () => {  
  const uri = 'products';  

  return rest.get(uri).then(response => response.json());  
};

products-reducer.js

import { ReduxModule } from 'rest-redux-actions';
import { getProducts } from '../services/api/ProductsAPI';

const settings = {  
  prefix: 'PRODUCTS',  // set actions prefix
  responseMap: {  // If your API used alternative response structure you can manipulate change responseMap object or use alternativeResponse method in action creator
      message: 'message',  
      status: 'status',  
      error: 'error',
 },
 defaultState: { // default state
     data: []
 }
};

const productModule = new ReduxModule(settings);

const fetchProductsAction = productModule.createGetAction({   
  apiCall: getAllProducts,   
});

export actions = {
    fetchProducts: fetchProductsAction
}

export default productModule.createReducer();

ProductsContainer.js

import { connect } from 'react-redux';  
import Products from '../pages/Products';  
import { actions } from '../reducers/products-reducer';    
import { bindComplexActionCreators } from 'rest-redux-actions';  

const mapStatToProps = (state) => {
    return { ...state.products }
}  

const mapDispatchToProps = (dispatch) => ({  
  ...bindComplexActionCreators(actions, dispatch),
});  

export default connect(mapStatToProps, mapDispatchToProps)(Product);

Products.js

import React, { PureComponent } from 'react';

export default Products extends PureComponent {
    componentDidMoint() {
        this.props.getProducts();
    }

    render () {
        console.log(this.props.data)
        // log
        //{
        //    status: 2 // 0 - error, 1 - pending, 2 - succes
        //    payload: [], // your data,
        //    error: null // error text
        //}
        return (
            <div>
             ...some ui elemnts
            </div>
        )
    }
}

Last updated