browser-redux-bg
v0.2.0
Published
Messaging library for Cross-browser extensions and Chrome apps. Calls actions from the background script.
Downloads
2
Maintainers
Readme
Messaging library for cross-browser extensions and Chrome apps
Sends redux actions (from popup, windows or inject pages) to be called in the background by their function name. Use with redux-persist and browser-redux-sync.
Usage
import { createStore, compose, combineReducers } from 'redux'
import { persistStore, autoRehydrate } from 'redux-persist'
import { configureSync, sync } from 'browser-redux-sync'
import { configureBg, bgReducers } from 'browser-redux-bg';
import reducers from '../reducers';
import actions from '../actions';
const isFromBackground = false; // should be true for the background script
const finalCreateStore = compose(autoRehydrate())(createStore)
const extension = bgReducer(isFromBackground)
const rootReducer = combineReducers({ ...reducers, extension })
const store = finalCreateStore(rootReducer)
const persistor = persistStore(store, configureSync(configureBg(store, actions, isFromBackground)))
sync(persistor)
To send actions to be called in the background script:
In the container:
import { connect } from 'react-redux';
import someComponent from '../components/someComponent';
import * as someActions from '../actions/someActions';
import { bgActions } from 'browser-redux-bg';
function mapStateToProps(state) {
return {
state: state
};
}
const mapDispatchToProps = { ...someActions, ...bgActions};
export default connect(mapStateToProps, mapDispatchToProps)(someComponent);
In the component:
import React, { Component } from 'react';
class someComponent extends Component {
render() {
const { ...someActions, bg } = this.props;
return (
<p>
<button onClick={() => bg('actionFunctionName')}>Call an actionFunctionName in the background script</button>
</p>
);
}
}
export default someComponent;
See browser-redux for a boilerplate and more details.