nhardy
Redux Scripts Manager
This library allows for the management of dynamic script loading on the client with Redux. This allows you to conditionally load scripts that don't always need to load on your site, like third party APIs for social media or maps.
Peer Dependencies
Requires:
Usage
// Reducers file
import { combineReducers } from 'redux';
import { reducer as scripts } from 'redux-scripts-manager';
export default combineReducers({
scripts, // If you're giving this an alternate key, make sure you use that key when you register with the store
// Your reducers
});
// Client entry point
import scriptsManager from 'redux-scripts-manager';
scriptsManager(store); // Register with the store. Optionally takes a second parameter for the key in the store
// React component
import { loadScript } from 'redux-scripts-manager';
const src = '//example.org/path/to/script.js';
@connect(null, { loadScript })
export default class Thing Extends React.Component {
componentDidMount() {
this.props.loadScript(src).then(() => {
// Do Some stuff
});
}
}// React component
import { loadScript } from 'redux-scripts-manager';
// For scripts which provide a JSONP callback parameter
const src = cb => `//example.org/path/to/script.js?onload=${cb}`;
@connect(null, { loadScript })
export default class Thing Extends React.Component {
componentDidMount() {
this.props.loadScript(src).then(() => {
// Do Some stuff
});
}
}// React component
import { loadScript } from 'redux-scripts-manager';
const src = '//example.org/path/to/script.js';
@connect(null, { loadScript })
export default class Thing Extends React.Component {
componentDidMount() {
// For scripts that use a callback on `window`
this.props.loadScript(src, 'onApiLoaded').then(() => {
// Do Some stuff
});
}
}