Redux

State management is the key in app development. Everything that it is shown in to the user is the result of a selector over the state. State mutates by dispatching actions. These two Redux' functionalities are integrated in the core package.

You should be familiar with the Redux documentation.

Creates a counter using a button.

index.js

Copy 
import makeCounterDisplay from './containers/makeCounterDisplay.js';
import makeExampleView from './components/makeExampleView.js';
import makeNumberDisplay from './components/makeNumberDisplay.js';

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

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

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

  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);
  };
}

components/makeExampleView.js

Copy 
import React from 'react';

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

components/makeNumberDisplay.js

Copy 
import React from 'react';

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

components/makeCounterDisplay.js

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

ducks/counter.js

Copy 
export const INCREMENT = 'plugin/INCREMENT';
export const increment = () => ({ type: INCREMENT });

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

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

export default countReducer;

package.json

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