ez-projector

This ezFlux plugin creates a mutable projection of selected state values.
The projection has a one-way binding with the ezFlux state.
It will update whenever ezFlux will update.
However, mutations on the projection will have no influence on the ezFlux state.

• Install
• Usage
• Contributing

Install

NPM:

$ npm install ez-projector --save

Yarn:

$ yarn add ez-projector

Usage

import Vue from 'vue';
import EZFlux from 'ez-flux';
import ezProjector form 'ez-project';

// First, add the plugin to an ezFlux. Either on construction or through ezFlux.plug.

const ezFlux = new EZFlux({
  weather: {
    values: { rain: false },
    actions: { setRain: rain => ({ rain }) },
  },
}, {
  plugins: [ezProjector],
});

// In order to project state, a map of stateScopes to value keys has to be passed.

const weather = ezFlux.plugins.project({ weather: ['rain'] });

// lets assume a [Vue](https://vuejs.org/) Component:

Vue.component('weather', {
  data: () => weather,
  template: '<div>It's {{ weather.rain ? 'raining' : 'nice' }} outside</div>'
});

// Your output will be "It's nice outside"
// now lets make it rain:

ezFlux.actions.weather.setRain(true);

// Your output will now automatically become "It's raining outside"


// Once you are sure that you won't need the projection to watch ezFlux state, disconnect it.

weather.disconnectEZProjection();

Please note that deeply nested state values are not impacted by this behaviour at all.
In contrast to state primitives, they will always be a two way binding through default JavaScript referencing!

Contributing

Contributions of any kind are always welcome!

To run Linter, Flow, Bable and Mocha and have them watch src and test folders respectively:

$ npm start

To run Babel once:

$ npm run build