# redux-fetch-on-mount

> A higher order component that performs a redux action when the wrapped component is mounted

Latest version **1.0.7** (published 2017-06-12) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install redux-fetch-on-mount
pnpm add redux-fetch-on-mount
yarn add redux-fetch-on-mount
bun add redux-fetch-on-mount
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-06-12 |
| First published | 2017-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Or Zarchi |
| Maintainers | orzar |
| Keywords | redux, HOC, async, fetch, higher, order, component, react |

## Links

- npm: https://www.npmjs.com/package/redux-fetch-on-mount
- Repository: https://github.com/orzarchi/redux-fetch-on-mount
- Homepage: https://github.com/orzarchi/redux-fetch-on-mount#readme
- Issues: https://github.com/orzarchi/redux-fetch-on-mount/issues
- npm.io page: https://npm.io/package/redux-fetch-on-mount

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2017-06-12
- 1.0.6 — 2017-06-06
- 1.0.5 — 2017-05-11
- 1.0.4 — 2017-05-10
- 1.0.3 — 2017-05-10
- 1.0.2 — 2017-05-10
- 1.0.1 — 2017-05-10

## README

# 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:
```javascript
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:

```javascript

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:

```javascript

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

setDefaultLoading(LoadingSpinner)

```

---
_Source: https://npm.io/package/redux-fetch-on-mount · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._