Redux-Response-Middleware

Single Redux Middleware with Request/Success/Failure Pattern

Installation

npm i redux-response-middleware --save

Use

Add the middleware.

import { combineReducers, createStore, applyMiddleware } from 'redux';

import users from '@redux/users/reducer';
import posts from '@redux/posts/reducer';
import responseMiddleware from '@redux/helpers/responseMiddleware';

const reducers = combineReducers({ users, posts });

export default createStore(reducers, applyMiddleware(responseMiddleware()));

If the action has a service property you will receive corresponding props: data, error, loading, if these properties doesn't exist the action going to work as usually .

import { GET_POSTS, ADD_POST } from '@constants/actionNames';
import postServices from '@services/postServices';

const getPostsTarget = 'posts';
const addPostsTarget = 'post';

const success = (response) => {
  console.log('success:', response);
};

const failure = (error) => {
  console.log('error', error);
};

const postActions = {
  getPosts: (success, failure) => ({
    type: GET_POSTS,
    target: getPostsTarget,
    service: postServices.getPosts,
    response: resp => resp.data,
    error: error => error.data,
    success,
    failure,
  }),
  addPost: (values, success, failure) => ({
    type: ADD_POST,
    target: addPostsTarget,
    service: postServices.addPost(values),
    response: resp => resp.data,
    error: error => error.data,
    success,
    failure,
  }),
};

export default postActions;

Option	Type	Description
type	String	You should send a type name to handle from your reducer.
service	Promise	You should send a promise, for example axios.get('posts').
target	String	This is important to get good prop names, for example if target: 'post' you get props: postData, postError, postLoading.
initialState	*	The initial value ([], {}, '', etc)
response	Func (optional)	is a callback to handle the response route, for example if you have data: { data: { title } } you could use resp => resp.data.data, so that you can get in your redux state postData: { title } instead of postData: data: { data: { title } }.
error	Func (options)	Same as response option, but to handle errors.
success	Func (response)	The callback when the response is success.
failure	Func (error)	The callback when you get error