redux-request-maker v3.0.0

Redux Request Maker

This is a mini abstraction for making network requests with redux. The lib will manage the 4 high level state possibilities of networking requests, including not-asked, loading, success, and failure states.

The request states (this lib calls them status or statuses) idea comes from this blog post.

Installation

We need to install redux-request-maker and lodash as lodash is a peerDependency of redux-request-maker.

npm install --save redux-request-maker lodash

Configure store with redux-request-maker middleware.

// ./store/configure.js
import { createStore, applyMiddleware, compose } from 'redux';
+ import { middleware as reduxRequestMiddleware } from 'redux-request-maker';
import thunkMiddleware from 'redux-thunk';
import createRootReducer from './reducers';

const middleware = [
    thunkMiddleware,
+    reduxRequestMiddleware,
];

const createStoreWithMiddleware = compose(
    applyMiddleware(...middleware)
)(createStore);

function configureStore (initialState = {}) {
    const reducers = createRootReducer(persistCombineReducers);
    const store = createStoreWithMiddleware(reducers, initialState);
    return store;
};

export default configureStore;

Example Usage

createReduxRequest Example

Use createReduxRequest non collective result request.

import { createReduxRequest } from 'redux-request-maker';
import xhr from '../utils/xhr';

const {
    request,
    reducer,
} = createReduxRequest({
    actionTypePrefix: 'fetch-feed',
    callAPI: () => xhr.get('/api/v1/feed'),
});

export const fetchAllTickers = request;
export default reducer;

createReduxCollRequest Example

Use createReduxCollRequest for the collective result request.

import { createReduxCollRequest } from 'redux-request-maker';
import xhr from '../utils/xhr';
import F from 'lodash/fp';

const {
    reducer,
    request,
} = createReduxCollRequest({
    actionTypePrefix: 'fetch-item-detail',
    primaryKeyPath: ['slug'],
    callAPI: async ({ slug }) => {
        return xhr.get(`/api/v1/item/${slug}`);
    },
});

export const fetchTicker = request;
export default reducer;