https://github.com/btmpl/redux-preload
https://github.com/btmpl/redux-preload
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/btmpl/redux-preload
- Owner: BTMPL
- Created: 2017-03-31T15:34:13.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-29T18:40:08.000Z (about 9 years ago)
- Last Synced: 2025-07-25T06:29:41.326Z (11 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-preload
A small loader HoC that helps you deffer the rendering of your Components untill an (asynchronous) action or actions finish.
## Example
```javascript
/**
* attach a reducer to handle caching, if you skip this step the library will still function
* but no caching functionality will be used
*/
// store.js
import { reducer as preloadReducer } from "./redux-preload";
export default createStore(combineReducers({
preload: preloadReducer,
appReducer
}));
// app.js
import { preload } from "redux-preload";
const OriginalComponent = () => {
return
Preload completed
}
/**
* Define the preload action, it will receive a `next` callback that should be
* called once the desired criteria - data computed or fetched from remote
* source are met
*/
const waitOneSecond = (next) => {
setTimeout(next, 1000);
}
/**
* Wrap our Component in the preload HoC and pass a set of preload actions to
* be completed (in parallel) before the component is rendered.
*/
const Preload = preload({
preloader: waitOneSecond
})(OriginalComponent);
const App = () => {
return (
Example, should load after 1 second:
);
}
```
## API
### preload()
```javascript
import { preload } from "redux-preload";
preload(preloadFunctions, [options, props])(Component);
```
`preloadFunctions` should be an Object which every key will be considered a preload function to be evaluated before rendering the Component. Each of the functions will be called with following parameters:
- `next` - a callback to be called after the preloadFunction should be considered resolved
If you call the callback with an `Object` it will be spread as props onto the `Component` that will be rendered in the end. Multiple calls to `next` (eg. in multiple preloader functions) will be merged together.
- `dispatch` - Redux `dispatch()` function attached to the current store supplied by `react-redux` ``
- `props` - the props passed to the Component while rendering
`options` - optional secondary parameter with following keys:
- `placeholder` - default: `null` - a component to be rendered while the `preloadFunctions` are being evaluated. If provied a function, it will be called with the props passed in the JSX.
- `dontCache` - default: `false` - by default each of the `preloadFunctions` is marked as completed, and stored in redux, so that subsequent calls to given preload functions are immediately considered resolved, set to `true` to skip caching current request
- `ttl` - default: `null` - time (in miliseconds) after which the `preloadFunction` cache should be considered expired
- `showComponentWhileLoading` - default: `false` - if set to true the component will be returned right away, and updated as preloader functions resolv. This mode can be used to support basic cache, as its rendering more does not differ from just rendering the same component while the data is still loading.
### clearPreloadFunction()
```javascript
import { clearPreloadFunction } from "redux-preload";
preload({preloadFunctionId: preloadFunction})(Component);
store.dispatch(clearPreloadFunction("preloadFunctionId"));
```
Used to clear the information about resolution of given preloadFunction from the Redux store.
## License
MIT