Package for tracking loading state of multiple requests
npm install redux-request-loadingnpm install redux-request-loading
js
import { createStore, combineReducers } from "redux";
import { reducer as loading } from "redux-request-loading";
const store = createStore(
combineReducers({
anotherReducer
loading
})
);
`
Modify your code making asynchronous requests to dispatch the appropriate actions. E.g. using redux-thunk:
`js
import { loading, loadSuccess, loadError } from "redux-request-loading";
export function loadComments() {
const COMMENTS = "COMMENTS";
return (dispatch) => {
dispatch(loading(COMMENTS));
return fetch("/comments")
.then(comments => {
dispatch(loadCommentsSuccess(comments));
dispatch(loadSuccess(COMMENTS));
})
.catch(error => {
dispatch(loadError(COMMENTS));
throw error;
});
};
}
`
Or use the loadAndTrack method:
`js
import { loadAndTrack } from "redux-request-loading";
export function loadComments() {
return (dispatch) => loadAndTrack(dispatch, "COMMENTS", fetch("/comments"))
.then(comments => dispatch(loadCommentsSuccess(comments));
}
`
> loadAndTrack replaces loadingHelper which is now deprecated and will be removed in version 2.0.0
Checking state of request
Use the isRequestActive selector to check the state of your request
`jsx
import { isRequestActive } from "redux-request-loading";
const Comments = (props) => (
{props.loading ? "Comments loading..." : "Comments loaded!"}
);
const mapStateToProps = (state) => ({
loading: isRequestActive(state, "COMMENTS");
});
export default connect(mapStateToProps)(Comments);
`
Selectors
$3
Check whether a request is active.
Returns true if request is active, false if not. If no request is passed it will return true if any requests are active.
`js
import { loading, isRequestActive } from "redux-request-loading";
store.dispatch(loading("POSTS"));
const postsLoading = isRequestActive(store.getState(), "POSTS"); // true
const commentsLoading = isRequestActive(store.getState(), "COMMENTS"); // false
const loading = isRequestActive(store.getState()); // true
`
$3
Allows you to check if any of a list requests are active.
`js
import { loading, areRequestsActive } from "redux-request-loading";
store.dispatch(loading("POSTS"));
const postsLoading = areRequestsActive(store.getState(), ["POSTS"]); // true
const commentsLoading = areRequestsActive(store.getState(), ["COMMENTS"]); // false
const postsLoading = areRequestsActive(store.getState(), ["POSTS", "COMMENTS"]); // true
const loading = areRequestsActive(store.getState()); // true
`
$3
Gets the progress of all requests as a percentage (i.e. 100 when finished).
`js
import { loading, loadSuccess, getProgress } from "redux-request-loading";
store.dispatch(loading("POSTS"));
store.dispatch(loading("COMMENTS"));
let progress = getProgress(store.getState()); // 0
store.dispatch(loadSuccess("POSTS"));
progress = getProgress(store.getState()); // 50
store.dispatch(loadSuccess("COMMENTS"));
progress = getProgress(store.getState()); // 100
`
Memoized Selectors
Using reselect there are factory functions for memoized versions of isRequestActive and areRequestsActive. The returned functions will only calculate once when called multiple times for the same state - offering a peformance improvement. Read more about this concept on the reselect GitHub page.
$3
`js
import { makeIsRequestActive } from "redux-request-loading";
// component definition
const makeMapStateToProps = () => {
const isRequestActive = makeIsRequestActive("COMMENTS");
return (state) => ({
loading: isRequestActive(state);
});
};
export default connect(makeMapStateToProps)(Comments);
`
$3
`js
import { makeAreRequestsActive } from "redux-request-loading";
// component definition
const makeMapStateToProps = () => {
const areRequestsActive = makeAreRequestsActive(["POSTS", "COMMENTS"]);
return (state) => ({
loading: areRequestsActive(state);
});
};
export default connect(makeMapStateToProps)(Comments);
``