6

I'm making a form component with React, and want to store the form(s) and field(s) state with Redux.

So I have a form reducer and a formField reducer.

I first followed my gut feeling and tried nesting the formField reducer in the form reducer. This basically meant having the formField-related switch cases in both the form reducer and the formField reducer.

This felt a bit messy (repeating code), so I read more in the documentation, and found out it is recommended to normalize the state. So I took away the nested formFields and put them at the same level as forms.

This made the reducer nice and clean, but now retrieving the formFields for a specific form feels horrible. I'm basically looping through all the formFields every time and only returning those with the correct "formId" parameter.

The Redux documentation states you should treat the state as a normalized database, but didn't he forget that you don't have the luxury of being able to query for results?

Did I miss anything here? What is the recommended way to solve this?

Kris
  • 824
  • 2
  • 12
  • 28
  • 1
    I think it's an interesting question/topic, but it would be a lot easier if you provided some example code. – tobiasandersen Feb 23 '16 at 16:46
  • This is more like a debate than a question, I'm not sure you can get a clear action, but yes, some code would be useful in order to understand exactly what you are referring to. – Alex Moldovan Feb 23 '16 at 18:13

2 Answers2

4

It sounds like you keep formFields state as an array but want to query it as an object with formId being the key:

This made the reducer nice and clean, but now retrieving the formFields for a specific form feels horrible. I'm basically looping through all the formFields every time and only returning those with the correct "formId" parameter.

If you change formFields state to be an object, it will be much easier to query: formFields[fieldId].

As noted in the other answer, you can use to write composable “selectors” that define how to compute derived state. Then your components’ code will be simple because all heavy lifting of preparing the data handles in small and composable selectors.

You can check out reducers and selectors in the shopping-cart example to get a better idea of how the state is structured in idiomatic Redux apps. Note that this example uses vanilla functions for selectors but we recommend using Reselect for better performance.

JohnnyQ
  • 4,839
  • 6
  • 47
  • 65
Dan Abramov
  • 264,556
  • 84
  • 409
  • 511
1

From what I understand your issue is about querying derived data. (i.e. fields that belong to form X).

There is also a utility tool called reselect, your use-case seems to fit with what it solves.

You would just need to write a selector that expects a formId and it would return an array of form fields.

Sebastien Daniel
  • 4,649
  • 3
  • 19
  • 34
  • 1
    To be fair I did not create Reselect. See the [CREDITS](https://github.com/reactjs/reselect/blob/master/CREDITS.md). – Dan Abramov Feb 26 '16 at 02:28