izaakschroeder / redux-lift

Lifting for redux.

redux-lift

Store composition for redux.

The current primary composition mechanism in redux is middleware. While useful in altering the behavior of the dispatch function, it offers little control for composing multiple parts of an application that have different action or store needs. This is where lifting is useful.

Lifting allows you to "lift" your state, reducers and actions into another context. Lifting is a kind of store enhancer that is a superset of middleware.

Indeed, the applyMiddleware function can be built trivially using lift:

import lift from 'redux-lift';

function applyMiddleware(...args) {
  // `applyMiddleware` is really just lifting the dispatch function, nothing
  // more. Everything else is the identity lift.
  return lift({ liftDispatch: compose(...args) });
}

But the real power of lifting lies in its ability to manipulate the whole state tree, not just the dispatch function. What can you do with lifting?

• Implement time-travel for dev-tools,
• Keep track of promises for automatic server-side rendering,
• Track ephemeral UI state,
• Compose multiple redux apps together.

import lift from 'redux-lift';


export default lift({

});

function TextField({ value, onChange }) {
  return <input value={value} onChange={onChange} type='text'/>;
}

// https://github.com/rackt/react-redux/blob/master/src/components/connect.js
function ephemeral(eventMap) {
  return connect(function(state) {
    return {
      value: state.ephemeral[uniqueKey]
    }
  }, function(dispatch) {
    return {
      onChange: dispatch('EPHEMERAL', uniqueKey)
    }
  });
}

export default ephemeral({
  events: {
    onChange(ev) { return { value: ev.target.value; }}
  }
})(TextField);