react-redux-hoc-loader

React-Redux HOC and Reducer for managing status of loaders in redux state

Install

npm install --save react-redux-hoc-loader

Usage

Step 1: Add loaders reducer to list of your reducers.

// index.js
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import { reducer as loadersReducer } from "react-redux-hoc-loader";

const store = createStore(
  combineReducers({
    /* your reducers here */
    loaders: loadersReducer
  })
);

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

Step 2: Wrap your component with withLoading high order component and pass names of loaders as arguments.

// component.js
import withLoading from "react-redux-hoc-loader";

const LOADER_NAME = "example";

const CustomComponent = ({ loaders, ...props }) => {
  const loader = loaders[LOADER_NAME];
  return (
    <>
      <p>Loader status: <b>{loader.status ? "loading..." : "done"}</b></p>
      <button onClick={() => loader.start()}>Start loading</button>
      <button onClick={() => loader.stop()}>Stop loading</button>
    </>
  );
};

export default withLoading(LOADER_NAME)(CustomComponent);

HOC provides loaders property to your component. You can get object of concrete loader by loaders["NAME_OF_YOUR_LOADER"].

Each object contains following properties for working with loader:

Property	Type	Description
status	boolean	Status of you loader
start	function	Method for start of a loader. Can receive async or not callback as a first argument. See Options of Usage to get more details.
stop	function	Method for stop of a loader

Options of Usage

1. You can push more that one loader name to HOC:

withLoading("firstLoader", "secondLoader" /*, ... */)(Component)

2. You can pass your async callback and arguments for it to start method of loader.
In this case loader will be started before the start and stopped after the end of your callback
Example of usage start function with async callback:

  // async callback 
  loader.start(fetch, "/smth", { method: "DELETE" })
  // sync callback
  loader.start(console.log, "smth")

3. If you want to start/stop loaders from your action creators, "react-redux-hoc-loader" provides functions startLoading and stopLoading to manage it:

import { startLoading, stopLoading } from "react-redux-hoc-loader";

const LOADER_NAME = "example";

export const asyncAction = async dispatch => {
  dispatch(startLoading(LOADER_NAME));
  /* your async code, e.g.: */
  await fetch("/smth");
  /* end of async code */
  dispatch(stopLoading(LOADER_NAME));
}

License

This project is licensed under the terms of the MIT license.