Redux-axios-reducers NPM

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