axios-redux v1.0.4

Axios-Redux

Async calls using Axios that save to your redux store.

Getting Started

npm i -S axios-redux

Usage

Add to rootReducer

import {combineReducers} from 'redux';
import {QueryReducer} from 'axios-redux';

export default combineReducers({
    Queries: QueryReducer
});

Call query with endpoint

// services.js
import {Query} from 'axios-redux';

export function getUserDetails(userId) {
    const endpoint = `http://example.com/users/${userId}`
    return Query({
        name: 'UserDetails',
        endpoint
    });
}

export function updateUserDetails(userId, email) {
    const endpoint = `http://example.com/users/${userId}`
    const reqObject = {email}
    return Query({
        name: 'UserDetails',
        endpoint,
        method: 'put',
        reqObject
    });
}

// dont save this response, for example pdf or documents
export function getUsersReceipts(pdfId) {
    const endpoint = `http://example.com/pdfs/${pdfId}`
    return Query({
        name: 'UserReceipts',
        endpoint,
        saveToStore: false
    });
}

Access responses in components and making calls

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {getUserDetails} from 'axios-redux';

const Dashboard = ({userProfile, updateUserDetails}) => {
  if(userProfile.fetching) {
    return (<div>Loading...</div>);
  }
  return (
    <div>
        <h1>{`Hello ${userProfile.response.data.username}`}</h1>
        <button
            onClick={() => updateUserDetails({name: 'dale'})}>
        Click to update</button>
    </div>
  );
};

const mapStateToProps = state => ({
  userProfile: state.Queries.UserDetails
});

const mapDispatchToProps = {
    updateUserDetails
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);