How can a unique instance of a React component respond to the result of an async action using Flux?

Question

I have multiple instances of the same component rendered on the same page. Each of these components have identical behavior and call the same actions. The called actions are asynchronous and wait for the response from an API (after which more actions are created so that the response can be consumed by stores).

If an action is triggered from one of these components, that component needs to handle the eventual response in isolation from its siblings.

For example:

Three identical buttons are rendered on a page
Clicking a button will create an action that asynchronously queries an API and dispatches a new action with the response's payload (true)
Once this response is received, the clicked button needs to turn blue
The unclicked buttons must be unaffected.

How would I go about implementing this simple example in a React/Flux fashion?

The immediate solution that comes to mind is to assign a unique identifier with the component, pass that ID along with the actions, and listen for that specific ID in the store to indicate that it is time to turn blue.

Another solution is to lift the "color" state in each of the rendered components up to their container and mirror this in the store (i.e., have button1Color, button2Color, ... in the store). The downside is that any addition of a button needs to have its own state variable in a store (more brittle!). Is that the better option?

Is there a better way?

This was also asked in Flux store emitting changes to specific react components rather than all components., but I don't believe there was a clear or satisfying answer.

Edit: Further resources:

It looks like my first solution mirrors Fluxxor's (old?) [way of handling this issue](https://medium.com/front-end-development-2/multiple-components-in-flux-acd73d8fceef), whereas the second method is the standard container-component strategy that Facebook recommends [1](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) [2](https://www.youtube.com/watch?v=KYzlpRvWZ6c&feature=youtu.be&t=22m51s) — Kevin Lee, May 11 '17 at 01:05

score 1 · Accepted Answer · answered May 15 '17 at 22:00

I think you're unnecessarily splitting the proper answer to your question in half, and debating which half to use. You should use both.

Your store ought to have a hash of values that correspond to different sub-components's eventual states, hashed on some sort of id.

That store might have a state that looks like;

{
    id_1: {
        //api response object
    },
    id_2: {
        //api response object
    },
    ...
}

You then need a container whose job is to take the data from the flux store, and parse it to provide it's child components with proper props.

That container should have a function on it that does a lookup to find the correct color for each child, e.g.;

getColor: function(id) {
    return this.props.flux_store[id].some_value == 'condition' ? 'red' : 'green';
}

And then that container should render;

<SubComponent color={this.getColor('id_1')} key='id_1' />

How can a unique instance of a React component respond to the result of an async action using Flux?

1 Answers1