Search code examples
reactjsformsreduxredux-sagaredux-thunk

Should we be using redux in the following case?


I'm working on an enterprise application which is huge on forms, there are pages and pages full of forms. Normally when it's just form, we could simply use a library like formik or react-hook-forms, but what I see time and again is when something changes, there's a business requirement to do something, which means I'm mutating form values programmatically.

We are currently using useEffect and put all those business logic side effects on components, but then it feels like I'm mixing view with business logic.

My instinct however is to use redux, and use redux-saga to manage all the side effects and complexity this way my UI is pure and is easy to write tests for. And redux-saga handles the business logic and side effect which is where they should belong anyway IMO, I want to know what the community is doing in this case.

My case, forms aren't as simple as displaying forms, and on submit, handle data, we also need to handle when something changes, we have some business logic and sometimes we actually update other values.

For things like this input is disabled when this checkbox is disabled it doesn't need redux, what about the rest? What are you guys doing?


Solution

  • We made a decision based on different aspects, because redux is too verbose, we didn't want to use it, but that's not how engineers choose tech.

    We decided to give weights to each points:

    • Performance (5)
    • Duplication of states (5)
    • Ease of handling side effects (separation of concerns) (10)
    • Learning Curve (3)
    • Unit testing easeness (7)
    • Debugging (Dev Experience) (5)
    • Verbosity (less verbose is better) (5)

    When we evaluated these, redux with saga came out top, sure formik has it's strength, but our whole App is just forms, and those forms aren't as simple as rendering and doing some minor side effects, it's huge form and side effects happen in such a complex ways, that just being able to track down issues using devtools is already huge.

    Another thing is having a redux-saga layer helped, anyway, that's how we made the decision, but 99.9% of forms should continue using formik, but unfortunately we're at that 0.1% where redux scales with number of developers (5000+ dev in company, 50+ actively contributing to this project), and redux having devtools and ability to separate side effects, exploring data etc just made more sense.

    Please choose your own when you need it.

    https://github.com/reduxjs/redux/issues/1287#issuecomment-175351978 Dan says use redux if it matters globally OR is mutated in complex ways our form is mutated in such a complex ways that it's very difficult to maintain code in future, formik made it easy to write code, but redux makes it easy to debug and maintain. (for us)