immudux

The Complete Immutable JS Version of Redux

Benefits

• Only Immutable JS support
• Much more performant (only calls subscribers that are affected by the reducer change)
• No need for Reselect
• Standard API calling action (coming soon)

Usage

npm i --save immudux

75% of the implementation is the same as redux, main differences are:

• Actions MUST be Immutable JS Maps
• Actions MUST have a type property
• Reducer returns two things, newState: Map and affected: Array
• Subscribers subscribe via a function and an affected array

If you use createReducer, it handles affected so you just need to return the new state. If not it should be returned like this:

{
  newState: Immutable JS Map,
  affected: Array<string>
}

Subscribers subscribe to a certain affected area and they get called when that domain changes. If you subscribe to ['todo'] and a reducer updates in ['counter'] it won't call the subscriber. Any reducer having 'todo' in affected updates that subscriber.

Function Usage

createReducer(reducers: Object): (action: Map, state: Map) => { affected: Array<string>; newState: Map }

Description: Takes a reducer object in like this { area: { CONSTRUCT: Function; HANDLER: Function } } and returns a reducer combining the object, which are supplied to the create store.

Specifications: The input must have a domain Map with at least a CONSTRUCT function inside it:

Valid Inputs:

{ 
  todo: { 
    CONSTRUCT: () => fromJS([{id: 1, text: 'hello World'}])
  }
}

{ 
  todo: { 
    CONSTRUCT: () => fromJS([{id: 1, text: 'hello World'}]),
    ADD_TODO: (action, state) => state.push(fromJS({id: 2, text: 'state is the selected state'}))
  }
}

Invalid Inputs:

{ 
  todo: { 
    NOT_CONSTRUCT: () => fromJS([{id: 1, text: 'hello World'}]),
  }
}

{ 
  todo: { 
    CONSTRUCT: () => fromJS([{id: 1, text: 'hello World'}]),
    NOT_A_FUNCTION: ''
  }
}

createStore(reducer: Function): { getState: Function; dispatch: Function; subscribe: Function }

Description: createStore is the core part of immudux, making the store required for everything. It takes in a reducer and returns an API to read the state through getState() and subscribing and updating through dispatch.

Specifications: The input reducer function must take an action and a state and return a regular JS object with newState and affected. createStore then iterates through the selectors, calling each one that is affected then setting the state as newState.

applyMiddleWare(...funcs: Array<Function>) => Function

Works exactly the same as redux's applyMiddleWare just keep in mind that actions are Immutable Maps

Credit

gaearon for redux which this is just an adjustment to. gajus for canonical reducer composition which this is based off of