fluxxor-wrapper

fluxxor-wrapper

A hoc try to implement both FluxMixin and StoreWatchMixin of fluxxor. This project is inspired by this PR proposed by BinaryMuse.

What is hoc?

It is the abbreviation of Higher-order component.

Why replace mixins with hoc ?

There are lots of articles about the topic. If you never heard of hoc, or you are not sure if hoc is what you need. In both conditions, you should have a look at the articles below at least before using it.

• Mixins are dead. Long Live Composition
• Mixins considered harmful

Install

npm install --save fluxxor-wrapper

Getting started

First of all you need to remove your legacy mixin-style. Don't forget to remove getStateFromFlux method in root component.

The main and only API:

fluxxorWrapper(
  component: React component,
  flux: flux instance,
  stores: array of store,
  props: object or function returning states,
);  

A simple example:

const fluxxorWrapper = require('fluxxor-wrapper');

const stores = {
  storeA: new StoreA.store(),
  storeB: new StoreB.store(),
}; 

const actions = {
  actionA() {
    this.dispatch('WHATEVER', { key: value })
  },
};

const flux = new Fluxxor.Flux(
  stores,
  actions,
);

const fluxxorProps = (flux) => {
  return {
    statesInStoreA: flux.store("storeA").getState(),
    statesInStoreB: flux.store("storeB").getState(), 
  };
};

const WrappedComponent = fluxxorWrapper(
  myComponent,
  flux,
  ["storeA", "storeB"],
  fluxxorProps
);

Now you are good.

FluxMixin

FluxMixin mainly do two things:

• Use context to pass flux automatically through a tree
• Make you access flux by this.getFlux()

On the purpose of performance and making data explicit. I am not going to support the feature anymore. Instead I pass flux as a props to myComponent, you can get flux by this.props.flux in myComponent now.

StoreWatchMixin

StoreWatchMixin mainly do two things:

• Add/remove event listener to the event "change" in componentDidMount for every stores you register.
• Fetch states from stores you register to the top component by the method getStateFromFlux.

We can get the states you declare in your stores from props. Now we can get statesInStoreA and statesInStoreB in myComponent.props.

Test

TO BE DONE

Contributing

I am glad you like this package, and hope it could help you and save your time. PR and advices are welcome. If you have questions, please fire a issue or send me an email.

Lisence

Check lisence here.