redux-axios-reducers

Redux reducers for fetching data with axios HTTP client

Installation

npm install --save redux-axios-reducers

Dependencies

redux-axios-reducers depends on redux, redux-thunk.

How to use?

Configure and connect an Axios reducer

import {createStore, combineReducers} from 'redux';
import {AxiosReducer} from redux-axios-reducer;

const usersReducer = new AxiosReducer({name: 'users'});

const client = axios.create({
  baseURL:'http://localhost:8080/api',
  responseType: 'json'
});

const reducers = combineReducers({

    // You must to call reducer.configure method for provide reduce function into Redux
    users: usersReducer.configure({axios: client});

    // application reducers
    ...
});

const store = createStore(reducers)

Dispatch actions

A reducer instance has methods which generate async (redux-thunk) actions. The actions do HTTP request.

// HTTP GET /api/users
loadUsers = () => usersReducer.get()

// HTTP GET /api/users?status=active
loadUsersWithFilter = (status) => usersReducer.get({
    // See Axios documentation for params
    params: {
        status: 'active'
    }
})

// HTTP PUT /api/users/1
updateUsers = (id, data) => usersReducer.put({
    url: 'users/' + id,
    data: data
})

// Redux-thunk middleware
loadUsers = () => (dispatch) => {
    dispatch(usersReducer.get())
    .then( () => {
        // do something else
    })
}

// Redux-thunk middleware, chain methods
loadUsersAndComments = () => (dispatch) => {
    Promise.all([
        dispatch(usersReducer.get()),
        dispatch(commentsReducer.get())
    ])
    .then( () => {
        // do something else
    })
}

Reduce actions

A reducer is generating TYPES based on given name:

    reducerInstance.TYPES
    // {
    //     FETCHING: `ASYNC/${name.toUpperCase()}/FETCHING`
    //     FETCH_FAIL: `ASYNC/${name.toUpperCase()}/FETCH_FAIL`
    //     FETCH_SUCCESS: `ASYNC/${name.toUpperCase()}/SUCCESS`
    //     
    // }

So you can use it in your own reducers like usersReducer.TYPES.FETCH_SUCCESS

Reducers methods

AxiosReducer/AxiosRestReducer

method | description ------------------------|------------------------ get/fetch | HTTP GET accepts AxiosParams post | HTTP POST accepts AxiosParams put | HTTP PUT accepts AxiosParams patch | HTTP PATCH accepts AxiosParams remove | HTTP DELETE accepts AxiosParams

License

This project is licensed under the MIT license, Copyright (c) 2017 Kirill Klenov. For more information see LICENSE.md.

Acknowledgements

Dan Abramov for Redux Matt Zabriskie for Axios. A Promise based HTTP client for the browser and node.js