tl; dr; Synthetic Sugar for consistently handling Ajax Calls in an async Redux Flow.
For people using redux, working with ajax requests to server, usually have something to do with the following:
- Dispatching actions when you start loading, when the response came back successfully, and when an error occured.
- Using a local cache for that request, before initiating it
- Locally mocking APIs before the actual APIs were even developed.
redux-sources enables you to define your API calls in a more structured and consistent way.
"Lightly" influenced by the "Data Sources" concept in Alt.js (http://alt.js.org/docs/async/)
Below is an action creator that returns the "source" as a thunk (https://github.com/gaearon/redux-thunk) Upon dispatching this action creator
reduxStore.dispatch(loadAvatars({...}))
your redux store will start recieving actions based on the configuration supplied.
import {createSource} from "redux-sources"
loadAvatars: ( params ) => {
return createSource({
local(state) {
if (isExistsInCache || isLocalDebugMode) {
return [{"img": "avatar1.jpg", "user_id": "hatul"}, .... }]
}
// else returns undefined
},
remote(state) {
return ajax("/api/loadAvatars", params)
.then(response => reponse.data)
},
success: ACTION_TYPES.AVATARS_LOADED,
error: ACTION_TYPES.AVATARS_LOADED_ERROR,
loading: ACTION_TYPES.AVATARS_LOADING
})
}