react-redux-loader v1.0.2

react-redux-loader (example)

React-Redux loaders for controlling loader display with redux state

Install

npm install --save react-redux-loader

Usage

Check out the example in the example folder.

Step 1. Call makeLoaderRoot with your store, your customized loaders and the mounting callback function (if you need to control where in the DOM your root mounts) passed into it, the resulting component is your loader root component.

// ./index.js
import store from './store';
import { makeLoaderRoot } from 'react-redux-loader';
import * as modalComponents from './modal_components';

const mountLoaderRoot = loaderContainer => {
  document.body.prepend(loaderContainer);
};
const LoaderRoot = makeLoaderRoot(store, loaders, mountLoaderRoot);

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

// ./components/loaders
import OtherLoader from './other_loader';
import Spinner from './spinning_loader';

export const OTHER_LOADER = OtherLoader;
export const SPINNING_LOADER = Spinner;

Step 2. Add the loader reducer to your project under the key loader.

import { combineReducers } from 'redux';

import { loaderReducer } from 'react-redux-loader';

const rootReducer = combineReducers({
  loader: loaderReducer,
});

export default rootReducer;

Step 3. Wire up the provided action creators into your app where appropriate. These can be used in your components or anywhere in your app to dispatch events.

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { actions as loaderActions } from 'react-redux-loader';

class App extends Component {
  
  render() {
    return (
      <Fragment>
        <div>
          <button onClick={() => this.props.showSyncLoader()}>
            DEFAULT LOADER
          </button>
        </div>
        <div>
          <button onClick={() => this.props.hideSyncLoader()} >
            Hide Loader
          </button>
        </div>
      </Fragment>
    );
  }
}
export default connect(
  null,
  { ...actions, ...loaderActions },
)(App);

Components

Component Factory: makeLoaderRoot(store, loaders, mountLoaderRoot)

arguments:

Action Creators

Available action creators.

showSyncLoader(args = {}):

available arguments:

hideSyncLoader():

available arguments:

none

showInlineLoader(key = null):

available arguments:

hideInlineLoader(key = null):

available arguments:

interfaceRequest(args = {}):

available arguments:

interfaceComplete():

available arguments:

none

License

MIT