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)