A redux middleware for token base API endpoint, will help you request token and save it to local storage before fetching actual endpoint.
$ npm install redux-api-token-middleware
import { createStore, applyMiddleware } from 'redux';
import apiTokenMiddleware from 'redux-api-token-middleware';
const config = {
clientID: '1',
clientSecret: 'secret',
accessTokenURL: 'http://www.example.com/oauth/token',
tokenStorageKey: 'token_key', // key to use for saving to browser local storage
apiBaseURL: 'http://www.example.com/api',
};
const enhancers = applyMiddleware(apiTokenMiddleware(config));
export default function configureStore(initialState) {
return createStore(rootReducer, initialState, enhancers);
}
export function fetchPosts(params = {}) {
return {
type: 'FETCH_POSTS',
needToken: true,
tokenGrantType: 'client_credentials', // currently only support `client_credentials`
payload: {
url: 'http://www.example.com/api/posts',
method: 'GET',
params,
},
};
}
You have to use redux-promise-middleware for handling async code in your component.
Note this is just a beta version, this package was create due to my current project needed.