acdlite / acdlite/flummox

multiple instances of the same (component, store, actions)?

Open
#237 4 comments 0 reactions 0 assignees View on GitHub
outdated question
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.