@edy/redux-api-middleware
v1.0.3
Published
Redux API Middleware
Downloads
10
Readme
Redux API Middleware
A simple middleware based on the one from the Redux Docs.
Installation
npm install @edy/redux-api-middleware
Usage
Please see Middleware Docs on how to add middleware to redux. This is how i use it:
import { createStore, applyMiddleware } from 'redux';
import apiMiddleware from '@edy/redux-api-middleware';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(apiMiddleware)
);
Example 1 (easy)
Action:
export function loadUsers () {
return {
types: [START, SUCCESS, ERROR],
callAPI: () => fetch('/users'),
};
};
Then somewhere in your component:
dispatch(loadUsers());
Reducer:
switch (action.type) {
case START:
return {
...state,
isLoading: true
};
case SUCCESS:
return {
...state,
users: action.response,
isLoading: false
};
case ERROR:
return {
...state,
isLoading: false,
error: action.error
};
default:
return state;
}
Example 2 (not so easy)
Action:
export function setToken (newToken) {
return {
types: [START, SUCCESS, ERROR],
payload: {
token: newToken
},
shouldCallAPI: (state) => {
const { token, tokenSentToServer, tokenDidInvalidate, tokenSentToServerOn, tokenIsUpdating } = state.settings;
const lastUpdated = new Date() - new Date(tokenSentToServerOn);
if (token !== newToken) {
return true;
} else if (tokenIsUpdating) {
return false;
} else if (lastUpdated > 86400000) { // 86400s = 24h
return true;
} else if (!tokenSentToServer) {
return true;
}
return tokenDidInvalidate;
},
callAPI: ({ dispatch, getState, payload}) => api.setToken(newToken).then((data) => newToken),
onStart: ({ dispatch, getState, payload}) => {
// do something before the api is called
},
onSuccess: ({ dispatch, getState, payload, response }) => {
// do something after api was called
},
onError: ({ dispatch, getState, payload, error }) => {
// do something after an error occured, maybe display a notification
},
};
};
Then somewhere in your component:
dispatch(setToken(1234567890));
Reducer:
switch (action.type) {
case START:
return {
...state,
tokenSentToServer: false,
tokenIsUpdating: true
};
case SUCCESS:
return {
...state,
token: action.payload.token,
tokenSentToServer: true,
tokenDidInvalidate: false,
tokenIsUpdating: false
};
case ERROR:
return {
...state,
tokenSentToServer: false,
tokenIsUpdating: false
};
default:
return state;
}