When generating reusable components using map how do you generate corresponding (dynamic) actions and reducers

JavaScript
1

As per this sandbox: https://codesandbox.io/s/angry-bird-v2xy8 .

Clicking on the Product SOW checkbox will show 4 x components. These 4 x instances have been generated from code in the following location: ‘src’ - ‘components’ - ‘ExtendedOptionsTwo’ - ‘ProductSOW’.

The ‘ProductSOW.js’ file details the first step in a chain of files used to generate the 4 instances above.

Having successfully generated these reusable components (i’m not sure if I’ve done it the best way but it seems to work??) i now need to set up actions and reducers to update the store whenever any of the drop-down options (as per each instance) are chosen.

I currently have 1 x action (‘sendProdSelectionToRedux’) and 1 x reducer (‘sendProdSelectionToRedux’) to update the store with the first drop-down option picked.

If I click the checkbox under any image, choose a drop-down option then click the next checkbox under the next image (onBlur was used to update the store) I will see (In Redux Dev tools) that the store/state key: configOption is updated with the selection I just chose.

This is great but not quite what i’m after, because if I then choose another drop-down option this choice will overwrite the first choice.

What I need is for every drop-down selection to be added to the store (into an array of objects (componentInstanceName: dropDownOptionSelected)) then for that array of objects to be available when I submit the form.

As the component instances to access these drop downs are generated dynamically (via map and a reference to an array of objects in ‘ProductOptionsList)’ I don’t know how to configure the action and reducer to add each choice made from any drop-down into an array of configOption choices (and make it clear which instance the dropdown option came from).

Would I need multiple reducers/actions for this, if i need to make them dynamic, how would I do this?

I would be grateful if someone could please help me out?

  1. Have I misunderstood reusable components so therefore have made this situation a lot more complicated than i need to?
  2. If the setup is ok, how do i structure the actions and reducers?

======================
Actual result: the store key: ‘configOption’ is overwritten every time a dropdown option (in one of the component instances is chosen (this can be seen in redux dev tools when running the project in chrome)

Required result: a store key that is an array of objects (the number of objects depending on the number of options picked):

selectedConfigOptions = [
{componentInstanceName: dropDownOptionSelected},
{componentInstanceName: dropDownOptionSelected},
{componentInstanceName: dropDownOptionSelected}
]

The github for this sandbox is: https://github.com/char502/PDF-Gen-Redux-Two

2

I think so, but I think you can get this working as is with a minor modification.

To make an immediate fix, what you need to do, as far as I can see, is concat the payload onto the existing selectedConfigOptions value, not just overwrite it. That gives you your array of configs, but then the issue is that every time a new option is set, the array just gets bigger. So you first see if one of the objects in selectedConfigOptions has that componentInstanceName key. If it does, map the options, replacing the one with the matching name with the new payload. If it doesn’t, hasn’t been set yet so concat the payload.

3

Ah, yes, concat will prevent overwrite, thanks for the tip :+1:

I still need to figure out the ID’s though i.e:

How to assign an id (or name) to each mapped component in a way I can access it in the reducer, in order to use it in the selectedConfigOptions array so the form submit is meaningful (can you offer any suggestions on this one, i’m still finding my feet with React and redux?)

Once I can identify each mapped component I should be able to include that in the reducer so it’s clear what is being selected and from which component.

After that, as you say, I will need to do a check on whether an option from a particular drop-down has been selected already and if so, replace it with the new selection from that particular drop-down if need be.

Ok, things to figure out but you’ve helped me break down the problem further to maybe help come to a solution, thanks