fluxxor-wrapper
v1.0.3
Published
A hoc try to implement FluxMixin and StoreWatchMixin of fluxxor
Downloads
7
Readme
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.
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.