Reduxec

Reusable actions and reducers for redux

Concepts

Add additional dimension for actions and reducers to specify where exactly on the state tree action should be applied.

Install

yarn add reduxec

or

npm install reduxec --save

Usage

Reduxec uses several conceptual elements:

• Target
• Namespace
• Exection (exec-action)

Targets

Targets are reducers grouped in one namespace. Target can be created with handlers object by createTarget:

// counter-target.js
import { createTarget } from 'reduxec';

const counterHandlers = {
  INCREMENT: (state, action) => state + 1, 
  DECREMENT: (state, action) => state - 1,
  SET: (state, action) => action.payload
};

export default createTarget(counterHandlers);

Created target should be passed to namespace.

Namespaces

Namespaces are reducers with targets. Namespace will take action and will pass it to corresponding target.

// counters-namespace.js
import createNamespace from 'reduxec';
import counterTarget from './counter-target';

const countersNamespace = createNamespace({
  counter1: counterTarget(0),
  counter2: counterTarget(100),
  counter3: counterTarget(-100)
}, 'COUNTERS');

export default countersNamespace;

Note that counterTarget is a function that takes initialState as an argument.

Reduxec namespace reducer can be used along side with any other reducers:

// root-reducer.js
import { combineReducers } from 'redux';
import counterNamespace from './counters-namespace.js';

const rootReducer = combine({
  plain: myPlainReducer,
  counters: counterNamespace
});

export default rootReducer;

Exec-actions

Differences from plain redux actions:

1. should have exec and target fields
2. type is used as a trigger to determine on which namespace it should be used

// Simple reduxec-action
const action = {
  type: 'COUNTERS',
  meta: {
    target: 'counter1',
    exec: 'INCREMENT'
  }
};

Same action can be created with createAction:

import { createAction } from 'reduxec';

const actionDescriptor = { exec: 'INCREMENT' };

// return [Function]
const withTrigger = createAction('COUNTERS');

// return [Function]
const withTriggerAndTarget = withTrigger('counter1');

// return final action object
const action = withTriggerAndTarget(actionDescriptor);

createAction is a higher-order function, so it can be bound to specific namespace and/or target.

To bind multiple actions can be used createActions:

// actions.js
import { createActions } from 'reduxec';

const actionsObject = {
  increment: { exec: 'INCREMENT' },
  decrement: { exec: 'DECREMENT' }
  // actions in action object could be functions.
  set: value => ({ exec: 'SET', payload: value }),
};

// we can hard bind to `COUNTERS` namespace if we are sure 
// that it is the only place where actions will be used
const countersActions = createActions('COUNTERS');

export default function getActions(target) {
  return countersActions(target)(actionsObject);
}

// index.js
import getActions from './actions.js';
import getStore from './store.js';

const counterOneActions = getActions('counter1');
const counterTwoActions = getActions('counter2');
const store = getStore();

store.dispatch(counterOneActions.increment());
/* action:
{ 
  type: 'COUNTERS',
  meta: {
    exec: 'INCREMENT',
    target: 'counter1'
  }
}
*/

store.dispatch(counterTwoActions.set(10));
/* action:
{ 
  type: 'COUNTERS',
  meta: {
    exec: 'SET',
    target: 'counter2'
  },
  payload: 10
}
*/

Examples

counter

API

Targets

createTarget

• signature :: handlers -> initialState -> { initialState, reducer }

Namespaces

createNamespace

• signature :: (targets, trigger) -> reducer

createNamespaceObject

• signature :: (targets, namespace) -> { namespace: reducer }

Exections

createAction

• signature :: string -> string -> { exec, payload, meta} -> { type, meta, payload }

wrapActions

• signature :: F (...args -> action) -> { ...action } -> { ...F(action) }

bindActions

• signature :: (F actionCreatorWithTrigger -> target -> { ...action }) -> { ...F(action) }

createActions

• signature :: string -> string -> { ...action } -> { ...action }