Comments (12)
The reason this doesn't work
mixins: [StoreListener(this.props.getStore('my-store')],
is because mixins
is a static property, so it doesn't have access to component props.
On a related note, the suggested way of passing the Flux instance is to use React context. The documentation needs to do a better job of explaining this #12.
I've just started work on a React mixin pretty similar to yours that should make all of this easier. I'll open up a separate issue to track that.
from flummox.
Ok thanks, you wrote the best flux library.
I just started to write a small mobile app and it works well.
Can't wait to move Morpheus over flummox.
anyway, why do you think is a better approach to use contexts?
Is it documented as a stable api on React docs?
from flummox.
Thanks for the kind words!
Context is suggested instead of props because it exposes your Flux instance to arbitrarily deep components. It's currently an undocumented feature, but the project maintainers have assured us that it's safe to use: https://www.youtube.com/watch?v=EPpkboSKvPI&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr#t=529
React Router uses context heavily, too.
from flummox.
This is the mixin (or a first draft that is heavily inspired by https://github.com/gaearon/flux-react-router-example/blob/master/scripts/mixins/createStoreMixin.js) that I'm currently using. It presumes that you use React.withContext
and that you define a function called getStateFromStores
which returns the data you want to store in your state.
'use strict';
var React = require('react');
module.exports = function createStoreMixin(stores) {
return {
contextTypes: {
flux: React.PropTypes.object.isRequired
},
getInitialState() {
this.stores = {};
this.flux = this.context.flux;
if (typeof this.flux === 'undefined') {
throw new Error("Print some error message...");
}
stores.forEach( (store) =>
this.stores[store] = this.flux.getStore(store)
);
return this.getStateFromStores();
},
componentDidMount() {
stores.forEach( (store) =>
this.stores[store].addListener('change', this.handleStoresChanged)
);
this.setState(this.getStateFromStores());
},
componentWillUnmount() {
stores.forEach( (store) =>
this.stores[store].removeListener('change', this.handleStoresChanged)
);
},
handleStoresChanged() {
if (this.isMounted()) {
this.setState(this.getStateFromStores());
}
}
};
};
You'll use it like this: mixins: [createStoreMixin(['someStore', 'anotherStore'])]
. After that you can use your stores via this.stores.someStore
and the flux component via this.flux
.
from flummox.
I end up with something similar, however I do not understand why we should call the callback when removing the listener. Any thoughts?
from flummox.
@SimonDegraeve Are you referring to removeListener('change', this.handleStoresChanged)
? That doesn't call the this.handleStoresChanged
; it just lets the event emitter (the store) know which listener to remove.
https://iojs.org/api/events.html#events_emitter_removelistener_event_listener
from flummox.
Indeed, I just realised that working on my mixin ;-)
from flummox.
@SimonDegraeve Do you want to post your mixin here so we can see it? I started writing one earlier today, but I'd love to take a look at everyone else's so we can gather all the best ideas.
from flummox.
Yes, that's my plan.... but to be accurate it not a mixin
as React defines it, but a method
for ES6 class. Should be done in the next 30min.
from flummox.
@SimonDegraeve Sweet. I'll finish mine up, too. I'm taking a slightly different approach, I think, so it will be good to compare.
from flummox.
I think it is easier with a gist. You can check here.
It is inspired by Reflux connect mixin.
from flummox.
Opened a pull request with my initial version. #18 Let's move this conversation over there
from flummox.
Related Issues (20)
- how to get a child component input value HOT 1
- Missing getActionsAsObject from Actions HOT 5
- Incorrect params passed to async begin handler HOT 1
- More topic guides needed in doc HOT 1
- Context differs problem
- Do not pass flux prop to components wrapped with `connect` HOT 6
- Use Redux HOT 6
- Explanation in README as to why a switch to Redux should be made HOT 5
- Import flummox/component fails with 4.0.0-rc1 HOT 1
- unable to make flummox work with react-router 1.0.0-beta3 HOT 2
- Actions.js grabs all console logs HOT 4
- Wrong link in why-flux-component-is-better-than-flux-mixin.md
- Considering the numbers HOT 1
- Support for React 0.14 HOT 17
- How to only use custom stateGetter for subset of subscribed stores HOT 1
- Maintain module? HOT 4
- FluxComponent does not work on IE10 HOT 24
- Flummox 3.6 is incompatible with IE8 HOT 3
- TestUtils removed from NPM HOT 2
- Deprecation warning with React 15.5 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flummox.