redux-fetch-on-mount v1.0.7

redux-fetch-on-mount

A higher order component that performs a redux action when the wrapped component is mounted While the action is not completed, a customizable loading component will be displayed.

Inspired by https://github.com/marmelab/javascript-boilerplate

##API:

withFetchingOnMount(actionCreator, {dataSelector, loadingSelector, paramsSelector})

actionCreator

A fetch action creator that will be invoked and dispatched on the wrapped component's mount.

dataSelector - (state, ownProps) => any

A selector function pointing to an object in the redux state received by the async action.

Until this selector will return a non null object, the loading component will be displayed.

*Note: If you are using this selector without supplying the loading selector as well, be sure to clear the previously fetched data from the redux state on a successful fetch - otherwise the loading component will not show!

loadingSelector - optional - (state, ownProps) => boolean

An optional selector function pointing to an boolean in the redux state, inidicating that the triggered fetch action is in progress.

Use this for more granular control over the loading component. Setting true to the target of the selector will force the loading component to show.

paramsSelector - optional - (state, ownProps) => any

An optional selector function that will supply the params to the action creator. The default implementation is (state, ownProps) => ownProps.

Overriding the loading component

Use the exported function setDefaultLoading - see example below.

##Example:

import withFetchingOnMount from 'redux-fetch-on-mount'

// Get report id from react-router url param (passed through ownProps)
const paramsSelector = (state, ownProps) => ownProps.params.id;

const mapStateToProps = state => ({ company: getCompany(state) });
const mapDispatchToProps = dispatch => ({downloadReport: companyId => dispatch(downloadReport(companyId))});

const loadingComponent = withFetchingOnMount(actions.item.request, {
    dataSelector: getCompany,
    loadingSelector: isLoading,
    paramsSelector
});

export default loadingComponent(connect(mapStateToProps, mapDispatchToProps)(CompanyPage));

Overriding the Loading component:

import { setDefaultLoading } from 'redux-fetch-on-mount';
import LoadingSpinner from 'awesome-ui-toolkit'

setDefaultLoading(LoadingSpinner)