1.0.3 • Published 5 years ago
@qiwi/redux-signal-bus v1.0.3
redux-signal-bus
We'll create our own notification bus with ttl, filters, blackjack and hookers over redux.
Install
yarn add @qiwi/redux-signal-bus
npm i @qiwi/redux-signal-bus
Usage
Inject to store
Since store.getReducer was replaced from redux, there's no tricky way to inject reducer to chain. So you need to wrap bus instance manually in accordance to your app architecture
const bus = new Bus()
const store = createStore({[bus.getScope()]: bus.getReducer(), ...})
bus.configure({store})
Bind with component
class Item extends Component {
render (props) {
return props.bus.listen('foo')
}
}
export default bus.connect(Item)
Don't forget to wrap your app with redux provider
<Provider store={store}><App/></Provider>
or just inject the store by hand
const ItemWithBus = bus.connect(Item)
const component = new ItemWithBus({store})
Bus API
export type IFilterValue = | string | RegExp | Function | any
export interface IBus {
scope: string;
store: IStore;
dispatcher: IDispatcher;
constructor(): IBus;
configure(opts: IBusOpts): IBus;
emit(name: string, data?: ?any, ttl?: ?number, silent: ?ISilent): void;
listen(value: IFilterValue, silent: ?ISilent, skipCompact: ?boolean): ISignalStack;
erase(value: IFilterValue, silent: ?ISilent): ISignalStack;
capture(value: IFilterValue, silent: ?ISilent): ISignalStack;
connect(component: IReactComponent): IReactComponent;
getReducer(): IReducer;
getScope(): string;
hashUpdate(): void
}
Usage examples are placed in ./example dir. In general it looks like this:
import bus from '../bus'
import React, {Component} from 'react'
class BarComponent extends Component {
render(props) {
return (<div>
Signals from from the 'FooComponent':
{props.bus.listen('foo').map(({data}) => JSON.stringify(data)).join(', ')}
</div>)
}
}
export default bus.connect(BarComponent)