Dispatchers

The Dispatchers package is a kernel that uses the dispatchersHelper to expose an API to fire Redux's actions.

Dispatchers helper

The dispatchersHelper is responsible for exposing an API to register action creators, get them, dispatch new actions, etc.

What is an action creator? You can find useful information about action creators in the following Redux documentation.

Show example

index.js

Copy

import { withFactory } from '@orion/core';
import makeCounterDisplay from './containers/makeCounterDisplay.js';
import makeExampleView from './components/makeExampleView.js';
import makeNumberDisplay from './components/makeNumberDisplay.js';

import countReducer, { increment, incrementFactoryExample, getCount } from './ducks/counter.js';

export default class MyPlugin {
  constructor({ diHelper }) {
    this._diHelper = diHelper;

    diHelper.useFactories({
      CounterDisplay: makeCounterDisplay,
      ExampleView: makeExampleView,
      NumberDisplay: makeNumberDisplay,
    });

    diHelper.useValue('NUMBER', 3);
  }

  onInit() {
    this._diHelper.invoke(this._registerREDUX);
    this._diHelper.invoke(this._putComponents);
  }

  _putComponents = ({ uiHelper, ExampleView }) => {
    uiHelper.putComponent('Example', ExampleView);
  };

  _registerREDUX = ({ storeHelper, selectorsHelper, dispatchersHelper }) => {
    storeHelper.registerReducer('count', countReducer);
    selectorsHelper.registerFactory('getCount', () => getCount);
    dispatchersHelper.register('increment', increment);
    dispatchersHelper.register('incrementFactoryExample', withFactory(incrementFactoryExample));
  };
}

components/makeExampleView.js

Copy

import React from 'react';

export default ({ diHelper, dispatchersHelper, CounterDisplay }) =>
  () =>
    (
      <div>
        <button onClick={() => dispatchersHelper.dispatch('increment')}>Increment + 1</button>
        <button onClick={() => dispatchersHelper.dispatch('incrementFactoryExample')}>
          Increment + {diHelper.get('NUMBER')}
        </button>
        <CounterDisplay />
      </div>
    );

components/makeNumberDisplay.js

Copy

import React from 'react';

export default () =>
  ({ number }) =>
    <span>[ {number} ]</span>;

containers/makeCounterDisplay.js

Copy

import React from 'react';

export default ({ uiHelper, selectorsHelper, NumberDisplay }) =>
  uiHelper.posConnect((state) => {
    const getCount = selectorsHelper.make('getCount');
    return (state) => ({
      number: getCount(state),
    });
  })(NumberDisplay);

ducks/counter.js

Copy

export const INCREMENT = 'dispatch-plugin/INCREMENT';
export const INCREMENT_FACTORY_EXAMPLE = 'dispatch-plugin/INCREMENT_FACTORY_EXAMPLE';
export const increment = () => ({ type: INCREMENT });
export const incrementFactoryExample =
  ({ NUMBER }) =>
  () => ({
    type: INCREMENT_FACTORY_EXAMPLE,
    number: NUMBER,
  });

export const getCount = (state) => state.plugins.count;

const countReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    case INCREMENT_FACTORY_EXAMPLE:
      return state + action.number;

    default:
      return state;
  }
};

export default countReducer;

package.json

Copy

{
  "name": "dispatch-plugin",
  "version": "1.0.0",
  "orion": {
    "selectorsHelper": {
      "selectorFactories": {
        "produces": [
          "getCount"
        ]
      }
    },
    "dispatchersHelper": {
      "actionCreators": {
        "produces": [
          "increment",
          "incrementFactoryExample"
        ]
      }
    }
  }
}

createAction

Creates an action due its name and rest of arguments.

Usage

createAction((actionCreatorName: String, ...args: any[]): Action;

• actionCreatorName String

  The name of the action creator to be invoked.

• args any

  Rest of arguments to invoke the action creator, commonly the props.

Returns

• Action

  The desired action. The action is invisible, this means that you can not use any of its properties.

Example

export default class Plugin {
  constructor({ storeHelper, dispatchersHelper }) {
    this._dispatchersHelper = dispatchersHelper;
    this._storeHelper = storeHelper;
  }

  onInit() {
    const action = this.dispatchersHelper.createAction('setValue', 3);
    this._storeHelper.dispatch(action);
  }
}

dispatch

Invoke an action creator due its name and dispatches the resulting action.

Usage

dispatch((actionCreatorName: String, ...args: any[]): void;

• actionCreatorName String

  The name of the action creator to be invoked.

• args any

  Rest of arguments to invoke the action creator, commonly the props.

Example

export default class Plugin {
  constructor({ dispatchersHelper }) {
    this._dispatchersHelper = dispatchersHelper;
  }

  onInit() {
    this._dispatchersHelper.dispatch('setValue', 3);
  }
}

getDispatch

Retrieves a dispatcher for the given action creator.

Usage

getDispatch(actionCreatorName: String): Function

• actionCreatorName String

  The name of the action creator which will be called by the retrieved dispatch.

Returns

• Function

  The desired dispatch, returns a noop in case it doesn't exist.

Example

export default class Plugin {
  constructor({ dispatchersHelper, storeHelper }) {
    this._dispatchersHelper = dispatchersHelper;
    this._storeHelper = storeHelper;
  }

  onInit() {
    const dispatchSetValue = this._dispatchersHelper.getDispatch('setValue');
    dispatchSetValue(3);
  }
}

register

Registers an action creator to allow its usage for all the plugins.

Usage

register(actionCreatorName: String, actionCreator: Function): void

• actionCreatorName String

  The name of the action creator.

• actionCreator Function

  The action creator function.

Examples

const SET_VALUE = 'SET_VALUE';
const setValue = (value) => ({ type: SET_VALUE, value });

export default class Plugin {
  constructor({ dispatchersHelper }) {
    this._dispatchersHelper = dispatchersHelper;
  }

  onInit() {
    this._dispatchersHelper.register('setValue', setValue);
  }
}

// register a dispatcher dio-factory
const makeSetSeven = ({ SEVEN }) =>
  () => ({ type: 'SET', value: SEVEN }));

export default class Plugin {
  constructor({ diHelper, dispatchersHelper }) {
    diHelper.useValue('SEVEN', 7);
    this._dispatchersHelper = dispatchersHelper;
  }

  onInit() {
    this._dispatchersHelper.register('setValue', withFactory(makeSetSeven));
  }
}