multiple instances of the same (component, store, actions)?
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 109
- PR merge metrics
- No merged PRs in 30d
Description
hi,
I am trying to find out what the best way is to have multiple instances of the same react component in the same app with flummox.
`Library` is a component that loads data from the specified url and displays it as a filterable list. let's say, I wanted to have two of those lists, but with different data sources. — how would I do that?
what seems to work is to simply create multiple `Flux` instances, one for each list:
``` javascript
// [...]
var Library = require('./components/Library/Library.js');
var LibraryActions = require('./components/Library/LibraryActions.js');
var LibraryStore = require('./components/Library/LibraryStore.js');
class AppFlux extends Flux {
constructor() {
super();
this.createActions('library', LibraryActions);
this.createStore('library', LibraryStore, this);
}
}
const flux = new AppFlux();
const flux2 = new AppFlux();
React.render(
,
$('#test-library')[0]
);
React.render(
,
$('#model-library')[0]
);
```
however, being new to (flux /) flummox, I'm not sure if it is supposed to be used like this.
also, what if a third component needed to react to actions from the two list components?
---
so I tried s.th. like this: only a single `Flux` instance, but instead creating multiple actions / store instances with different "names".
``` javascript
class AppFlux extends Flux {
constructor() {
super();
this.createActions('library', LibraryActions);
this.createStore('library', LibraryStore, this, 'library'); // tell store which name to use
this.createActions('model-library', LibraryActions);
this.createStore('model-library', LibraryStore, this, 'model-library');
}
}
const flux = new AppFlux();
React.render(
,
$('#test-library')[0]
);
React.render(
// tell component which name to use
,
$('#model-library')[0]
);
```
LibraryStore.js:
``` javascript
class LibraryStore extends flummox.Store {
constructor(flux, name) {
super();
const libraryActionIds = flux.getActionIds(name);
// [...]
```
Library.js:
``` javascript
class Library extends React.Component {
constructor(props) {
super(props);
utils.autoBind(this);
var flux = this.props.flux;
var libraryActions = flux.getActions(this.props.libName);
libraryActions.loadData(this.props.url);
}
// [...]
```
this feels a bit cumbersome, but works...
---
any suggestions, how to properly do this?
thanks a lot in advance.
Contributor guide
Assessment
This issue has not been assessed yet.