-
-
Save benpickles/b465db90ca11adc9ea00 to your computer and use it in GitHub Desktop.
import { CALL_API } from 'redux-api-middleware' | |
export function fetchLocations() { | |
return { | |
[CALL_API]: { | |
endpoint: 'http://api.somesite.com/api/locations', | |
method: 'GET', | |
// Don't have to manually add the Authorization header to every request. | |
headers: { 'Content-Type': 'application/json' }, | |
types: ['REQUEST', 'SUCCESS', 'FAILURE'] | |
} | |
} | |
} |
// ...Likely some other imports such as React etc. | |
import { createStore, applyMiddleware } from 'redux' | |
import { apiMiddleware } from 'redux-api-middleware' | |
// Our custom middleware. | |
import apiAuthInjector from './apiAuthInjector' | |
const store = createStore( | |
reducers, | |
applyMiddleware( | |
apiAuthInjector, // Put it somewhere before `apiMiddleware`. | |
apiMiddleware, | |
) | |
) | |
// ...the rest of your app setup. |
import { CALL_API } from 'redux-api-middleware' | |
import ls from 'local-storage' | |
export default function() { | |
return function(next) { | |
return function(action) { | |
const callApi = action[CALL_API] | |
// Check if this action is a redux-api-middleware action. | |
if (callApi) { | |
// Inject the Authorization header from localStorage. | |
callApi.headers = Object.assign({}, callApi.headers, { | |
Authorization: ls.get('id_token') || '', | |
}) | |
} | |
// Pass the FSA to the next action. | |
return next(action) | |
} | |
} | |
} |
Dude! You are a lifesaver. Thanks so much - this was exactly what I needed to solve my problem
Hi Team,
Where are we actually setting the localstorage value for the authorization header?
Any thoughts on how to get the token from redux state rather than local storage? I've been trying to use thunk's getState but can't get it working.
@smerin hidden in the jungle of the redux docs explaining middleware it's noted that we still have access to the top level store
...It's still useful to have access to some store methods like getState(), so store stays available as the top-level argument.
That's actually part of a monkeypatching demo explaining how middleware is built up... but follow down and you see it's available in the end results too, so you can simply call store.getState()
from within your custom middleware to get it out of your redux store instead of the local storage as demonstrated above.
I think the last file was meant to be named apiAuthInjector.js
, rather than authApiInjector.js
Hi, i modified the apiAuthInjector
method to be compatible with the new version of redux-api-middleware
import { isRSAA, RSAA } from 'redux-api-middleware'
import ls from 'local-storage'
import produce from "immer"
export function apiAuthInjector() {
return function (next) {
return function (action) {
// Check if this action is a redux-api-middleware action.
if (isRSAA(action)) {
let call = action[RSAA];
call.headers = produce(call.headers || {}, draftHeaders => {
draftHeaders.Authorization = ls('access_token') || '';
});
}
// Pass the FSA to the next action.
return next(action)
}
}
}
Thanks for this! I used this to make a few different changes to the CALL_API action.
Here's my full middleware in case it's helpful to anyone: