Usage

This package supports modular applications based on react and redux-saga.

Warning: the current interface using generators hinders debugging and will soon be replaced by a much simpler mechanism.

Bundles

A bundle is defined by a generator yielding directives:

function* myBundle () {
  yield …;
  …
}

Directives are built using directive-builder functions exported by this package.

The 'include' builder can be used inside a bundle to include another bundle:

yield include(myBundle);

The linker makes no attempt at detecting or avoiding double-inclusion.

Definitions

A bundle can make definitions which populate a flat namespace shared across all bundles that are linked together.

Action types

Action types are defined with the 'defineAction' builder, which takes the action type name and value. The name is used by the code to refer to the action type, the value is the string representation actually used in redux actions.

yield defineAction('name', 'String.Representation');

Selectors

Selectors are defined with the 'defineSelector' builder, which takes the selector name and function:

yield defineSelector('mySelector', function (state, props) {
  …
});

Views

Views are defined with the 'defineView' builder, which takes the view name, an optional selector name or function, and a React component:

yield defineView('TodoList', 'getTodoItems', TodoView);
yield defineView('App', AppView);

The selector, if given, is used to connect view instances to the redux store.

Constants

The 'defineValue' builder (alias 'def) can be used to make constants available to other bundles:

yield defineValue('Name', value);

Dependencies

A bundle can access definitions made in linked bundles with the 'use' builder:

function* myBundle (deps) {
  yield use('myAction', 'mySelector', 'MyView');
  /* use as deps.myAction, deps.mySelector, deps.MyView */
}

A bundle can refer to its own definition without having to "use" them.

Reducers

Reducers are added with the 'addReducer' builder which takes an action name and a reducer function:

yield addReducer('myAction', function (state, action) {
  return {state, …};
});

The store reducer generated by the linker dispatches actions to their individual action-reducer. If multiple action-reducers are added for the same action, they are all applied following the link order.

Sagas

Sagas are added with the 'addSaga' builder:

yield addSaga (function* mySaga () {
  …
});

Enhancer

Store enhancers can be added with the 'addEnhancer' linker directive:

yield addEnhancer(DevTools.instrument());

Enhancers are composed in link order.

Defers

Use the 'defer' builder to defer execution of a function until after link has completed and definitions have been provided.

yield defer(function () { … });

Defers run in link order.