Easydux NPM | npm.io

Easy Dux

Out of the box reducer creators.

Installation

yarn add easydux

Usage

import { object } from 'easydux';

const myReducer = object({
  SET: 'SET_ACTION_TYPE',
  CLEAR: 'CLEAR_ACTION_TYPE',
});

const store = createStore(myReducer);

store.dispatch({
  type: 'SET_ACTION_TYPE',
  data: { hello: 'world' },
});

store.getState();
// { "hello": "world" }

store.dispatch({
  type: 'CLEAR_ACTION_TYPE',
});

store.getState();
// { }

Integrating Reducers

These are just reducers. You could even call them like this:

const myObjectReducer = object({
  SET: 'SET_ACTION_TYPE',
  CLEAR: 'CLEAR_ACTION_TYPE',
});

function myReducer(state, action) {
  switch (action.type) {
    case 'MY_CUSTOM_ACTION':
      return { my: 'custom behavior' };
    default:
      return myObjectReducer(state, action);  
  }
}

You'll likely just include them with combineReducers like this though.

const myObjectReducer = object({
  SET: 'SET_ACTION_TYPE',
  CLEAR: 'CLEAR_ACTION_TYPE',
});

const reducer = combineReducers({
  reducerKey: myObjectReducer,
});

createStore(reducer);

Api

`value(actionTypes, default)`

Returns a reducer that sets or clears a single value.

actionTypes: object no single type is required
- SET: string the action type to set the state
- CLEAR: string the action type to clear the state
default: any default state - will be reset to this state on CLEAR defaults to null

import { value } from 'easydux';

const myValueReducer = value({
  SET: 'SET_VALUE_TYPE',
  CLEAR: 'CLEAR_VALUE_TYPE',
});

Value Actions

type: SET Sets reducer state.
- data: state | function<newState>(state, action)
type: CLEAR Sets reducer to default.

const mySetValueActionCreator = data => ({
  type: 'SET_VALUE_TYPE',
  data: 'new data',
});

// or

const mySetValueActionCreator = data => ({
  type: 'SET_VALUE_TYPE',
  data: state => 'new data',
});

const myClearValueActionCreator = data => ({
  type: 'CLEAR_VALUE_TYPE',
});

`array(actionTypes, default)`

Returns a reducer that sets or clears a single value.

actionTypes: object no single type is required
- UPDATE: string uses package immutability-helper to set new state
- SET: string the action type to set the state
- CLEAR: string the action type to clear the state
- SET_AT: string the action type to set a single item in the state
- INSERT_AT: string the action type to insert a single item in the state
- PUSH: string the action type to push a single element onto the state at the end
- UNSHIFT: string the action type to push some elements onto the state at the front
- CONCAT: string the action type to push some elements onto the state at the end
- CONCAT_TO: string the action type to push some elements onto the state at the front
- POP: string the action type to remove a single element from the end of the array
- SHIFT: string the action type to remove a single element from the front of the array
- REMOVE_AT: string the action type to remove a single item from the state
- SLICE: string the action type to slice the state into a subset
- MAP: string the action type to map the state
- FILTER: string the action type to filter the state
default: array default state - will be reset to this state on CLEAR defaults to []

import { array } from 'easydux';

const myArrayReducer = array({
  UPDATE: 'UPDATE_ARRAY',
  SET: 'SET_ARRAY',
  CLEAR: 'CLEAR_ARRAY',
  SET_AT: 'SET_AT_ARRAY',
  INSERT_AT: 'INSERT_AT_ARRAY',
  PUSH: 'PUSH_ARRAY',
  UNSHIFT: 'UNSHIFT_ARRAY',
  CONCAT: 'CONCAT_ARRAY',
  CONCAT_TO: 'CONCAT_TO_ARRAY',
  POP: 'POP_ARRAY',
  SHIFT: 'SHIFT_ARRAY',
  REMOVE_AT: 'REMOVE_AT_ARRAY',
  SLICE: 'SLICE_ARRAY',
  MAP: 'MAP_ARRAY',
  FILTER: 'FILTER_ARRAY',
});

Array Actions

import { array } from 'easydux';
import { createStore } from 'redux';

const reducer = array({
  SET: 'MY_ARRAY_SET',
});

const store = createStore(reducer);

store.dispatch({
  type: 'MY_ARRAY_SET',
  data: ['new', 'state', 'new', null],
  uniq: true, // optional
  compact: true, // optional
  sort: item => -item.length,
});

store.getState();
// [ 'state', 'new' ]

type: UPDATE Updates reducer state. See https://github.com/kolodny/immutability-helper
- data: config | object
type: SET Sets reducer state.
- data: state | function<newState>(state, action)
- ...post-processors: see below
type: CLEAR Sets reducer to default.
type: SET_AT Sets value at index.
- index: number
- data: state | function<newState>(state[index], action, state)
- ...post-processors: see below
type: INSERT_AT Inserts value at index, adding one element to the state.
- index: number: index of new value
- data: state | function<newState>(null, action, state)
- ...post-processors: see below
type: PUSH Adds value to end of state.
- data: state | function<newState>(null, action, state)
- ...post-processors: see below
type: UNSHIFT Adds value to front of state.
- data: value | (null, action, state) => value: state or function<newState>(null, action, state)
- ...post-processors: see below
type: CONCAT Adds values to end of state.
- data: state | function<newState>(null, action, state)
- ...post-processors: see below
type: CONCAT_TO Adds values to front of state.
- data: state | function<newState>(null, action, state)
- ...post-processors: see below
type: POP Remove value from end of state.
type: SHIFT Remove value from front of state.
type: REMOVE_AT Remove value from index in state.
- index: number: index of removed value
type: SLICE Remove value from slice of state.
- start: number: start of slice defaults to 0
- end: number: end of slice
type: MAP Runs state through lodash/map.
- data: string | function<value>(element, index, state): passed to lodash/map
type: FILTER Runs state through lodash/filter.
- data: object | function<boolean>(element, index, state): passed to lodash/filter

Optional Post-Processors

type: SET|SET_AT|CONACT|CONCAT_TO|INSERT_AT|PUSH|UNSHIFT The following keys will post-process the state.
- uniq: boolean: should the new state run through lodash/uniq default: false
- compact: boolean: should the new state run through lodash/compact default: false
- sort: string | function<boolean>(element, index, state): passed to lodash/sortBy default: undefined (no sort)

const mySetArrayActionCreator = data => ({
  type: 'SET_ARRAY',
  data: ['new', 'data'],
});

// or

const mySetArrayActionCreator = data => ({
  type: 'SET_ARRAY',
  data: state => ['new', 'data'],
});

const myClearArrayActionCreator = data => ({
  type: 'CLEAR_ARRAY',
});

const mySetAtActionCreator = data => ({
  type: 'SET_AT_ARRAY',
  index: 1,
  data: oldVal => 'newVal',
});

const myInsertAtActionCreator = data => ({
  type: 'INSERT_AT_ARRAY',
  index: 1,
  data: () => 'newVal',
});

const myPushActionCreator = data => ({
  type: 'PUSH_ARRAY',
  data: 'newVal at end',
});

const myUnshiftActionCreator = data => ({
  type: 'UNSHIFT_ARRAY',
  data: 'newVal at front',
});

const myConcatActionCreator = data => ({
  type: 'CONCAT_ARRAY',
  data: ['newVal 1 at end', 'newVal 2 at end'],
});

const myConcatToActionCreator = data => ({
  type: 'CONCAT_AT_ARRAY',
  data: ['newVal 1 at start', 'newVal 2 at start'],
});

const myPopActionCreator = data => ({
  type: 'POP_ARRAY',
});

const myShiftActionCreator = data => ({
  type: 'SHIFT_ARRAY',
});

const myRemoveAtActionCreator = data => ({
  type: 'REMOVE_AT_ARRAY',
  index: 1,
});

const mySliceActionCreator = data => ({
  type: 'SLICE_ARRAY',
  start: 1,
  end: -1,
});

const myMapActionCreator = data => ({
  type: 'MAP_ARRAY',
  data: element => element,
});

const myFilterActionCreator = data => ({
  type: 'FILTER_ARRAY',
  data: element => !!element,
});

`object(actionTypes, default)`

Returns a reducer that sets or clears a single value.

actionTypes: object no single type is required
- UPDATE: string the action type to update the state
- SET: string the action type to assign the state
- CLEAR: string the action type to clear the state
- MERGE: string the action type to merge the state
- REPLACE: string the action type to replace the state
- FILTER: string the action type to remove properties from the state
- MAP_VALUES: string the action type to map state values
- MAP_KEYS: string the action type to map state keys
default: object default state - will be reset to this state on CLEAR defaults to {}

import { object } from 'easydux';

const myObjectReducer = object({
  UPDATE: 'UPDATE_OBJECT',
  SET: 'SET_OBJECT',
  CLEAR: 'CLEAR_OBJECT',
  MERGE: 'MERGE_OBJECT',
  REPLACE: 'REPLACE_OBJECT',
  FILTER: 'FILTER_OBJECT',
  MAP_VALUES: 'MAP_VALUES_OBJECT',
  MAP_KEYS: 'MAP_KEYS_OBJECT',
});

Object Actions

import { object } from 'easydux';
import { createStore } from 'redux';

const reducer = object({
  SET: 'MY_OBJECT_SET',
});

const store = createStore(reducer);

store.dispatch({
  type: 'MY_OBJECT_SET',
  data: { hi: { mom: "I'm on TV!" } },
});

store.getState();
// { "hi": { "mom": "I'm on TV!" } }

store.dispatch({
  type: 'MY_OBJECT_SET',
  data: onWhere => onWhere.replace('TV', 'github'),
  key: 'hi.mom',
  depth: 2, // optional
});

store.getState();
// { "hi": { "mom": "I'm on github!" } }

type: UPDATE Updates reducer state. See https://github.com/kolodny/immutability-helper
- data: config | object
type: SET Sets reducer state. Set behavior tries to imitate React.Component().setState
- data: state | function<newState>(state, action)
  - whatever is passed to the reducer is merged with the state one level deep.
    - If a function is passed to data, state will be passed as that function's first argument and the result will be merged with the current state.
- depth: number: the depth of the merge data will have with original state. defaults to 1
- key: see below
type: MERGE Merges reducer state. Uses lodash/merge.
- data: state | function<newState>(state, action)
- key: see below
type: REPLACE Replaces reducer state.
- data: state | function<newState>(state, action)
- key: see below
type: MAP_VALUES Runs state through lodash/mapValues.
- data: function<value>(element, key, state): passed to lodash/mapValues
- key: see below
type: MAP_KEYS Runs state through lodash/mapKeys.
- data: function<value>(element, key, state): passed to lodash/mapKeys
- key: see below
type: CLEAR Sets reducer to default.
type: FILTER Runs state through lodash/omit or lodash/omitBy.
- data: array | function<boolean>(element, index, state): passed to lodash/omit for arrays and lodash/omitBy for functions
- key: see below

const mySetObjectActionCreator = data => ({
  type: 'SET_OBJECT',
  data: { hello: 'world' },
});

// or

const mySetObjectActionCreator = data => ({
  type: 'SET_OBJECT',
  data: state => ({ hello: 'world' }),
});

const myMergeObjectActionCreator = data => ({
  type: 'MERGE_OBJECT',
  data: state => ({ hello: 'world' }),
});

const myReplaceObjectActionCreator = data => ({
  type: 'REPLACE_OBJECT',
  data: state => ({ hello: 'world' }),
});

const myClearObjectActionCreator = data => ({
  type: 'CLEAR_OBJECT',
});

const myFilterActionCreator = data => ({
  type: 'FILTER_OBJECT',
  data: element => !!element,
});

Object-key

key: string | array: A key to target in the reducer state.

The same kind of argument you would pass to lodash/get. key contextualizes your action around a certain value in an object - passing the value of this key in the object to your data function and then setting the data (or the result of the data function) at the key in the object.

const reducer = object({
  SET: 'MY_OBJECT_SET',
});

const store = createStore(reducer, {
  hello: {
    my: 'honey',
  },
});

store.dispatch({
  type: 'MY_OBJECT_SET',
  data: ({ my }) => ({ my: 'baby' }),
  key: 'hello',
})

store.getState();
// { hello: { my: 'baby' } }

// or

store.dispatch({
  type: 'MY_OBJECT_SET',
  data: honey => 'baby', // or just data: 'baby'
  key: 'hello.my', // or ['hello', 'my']
})

store.getState();
// { hello: { my: 'baby' } }