connectToStores with an Array of stores about flummox HOT 15 CLOSED

@martintietz That's a good idea. Basically a reduce operation. It would require a bit of refactoring, though, since getStoreState() assumes a one-to-one relationship between stores and state getters.

from flummox.

Will this still need to support the 1 call per store to the stateGetter function?

If so one option could be to check the number of arguments on the stateGetter using Function.length (similar to how react-router does with willTransitionTo)

from flummox.

@tappleby Not sure I understand your question. The single key and object forms of connectToStores() will continue to work the exact same way. This would only affect the array form.

Only change I'd make to @martintietz's suggested API above is to pass an array of stores to the getter function, rather than spread them across as arguments.

from flummox.

Sorry, my question was when using the array form would there be some cases where the user wants the stateGetter to be called multiple times (once for each store)?

Initially I was thinking multiple calls would be required when using the defaultStateGetter FluxMixin(['storeA', 'storeB', 'storeC']), but that can be handled with a state getter that performs the reduce you mentioned.

My only issue with an array of stores instead of the spread is its not as clean when accessing the stores inside the getter.

from flummox.

If you're not dealing with them individually, you'd rather them be an array so you can do stores.reduce(). It's mostly an aesthetic thing, though, because with ES6, you can always do let stores = Array.from(arguments), or conversely, let [ storeA, storeB, storeC ] = stores.

from flummox.

Ah thats not so bad then. I was picturing the reduce using something like (...stores) => stores.reduce(...).

from flummox.

Yeah, even better. I still kinda like the symmetry of the taking in an array of store keys and passing an array of stores, but either way makes sense to me.

from flummox.

Yeah I do like the symmetry aspect.

from a functionality point of view, at least for my use cases, accessing the stores individually will be a lot more common then performing a reduce so it could get repetitive having to do:

function (stores) {
  let [ storeA, storeB, storeC ] = stores;
  ...
}

Also for those not using ES6 it gets a bit more verbose.

from flummox.

You could actually also do this:

function ([storeA, storeB, storeC]) {
  ...
}

I could really go either way on this. Can you think of a similar api from another library perhaps? I know there must be one, I just can't think of any off the top of my head.

from flummox.

That works. I used to have issues with that syntax and jstransform but appears to be resolved now (should probably just switch to babel anyways).

I cant think of a similar api offhand, will see if anything comes up in the morning.

With the ES6 syntax, I'm impartial to either. For ES5 its a bit cleaner as separate parameters or arguments for reduce. not sure about TypeScript of CoffeeScript.

from flummox.

What about object destructuring?

FluxMixin({ storeA, storeB, storeC }, function({ storeA, storeB, storeC }, props) {
...
})

(Pardon if I misunderstand how this mixin works and you're discussing something else entirely!)

from flummox.

@gaearon Destructuring is what I was suggesting above, except for arrays, not objects.

There are three ways you can call FluxMixin / connectToStores(). In the object form, the keys map to individual store getters, so you don't need the second parameter. We're discussing changing the array form so that you can specify a single state getter that is passed all the stores, as either an array or spread across the args.

It's this:

FluxMixin(['storeA', 'storeB', 'storeC'], function(storeA, storeB, storeC) { ... }

versus

FluxMixin(['storeA', 'storeB', 'storeC'], function(stores) { ... }

ES6 makes the difference mostly cosmetic — in the first form you could use spread to transform the args into an array, and in the second form you could use array destructuring to transform the array into "args".

from flummox.

@gaearon Oh now I think I see what your actual point was. Now that we've discussed passing props to state getters over in #31, the array form really is necessary so we can pass extra parameters at the end:

FluxMixin([ 'storeA', 'storeB', 'storeC' ], function([ storeA, storeB, storeC ], props) { ... })

from flummox.

Oh. I just realized why you're using strings there :-).

from flummox.

Added in #73 by @tappleby. Will be released as part of 3.0.

from flummox.