How to structure Reagent Container and Component for processing the life cycle of a form?

I would like some expert advice on how to organize my container and component.

  • My React Container is an invitation.
  • My React component is InviteForm

My question is when the user submits the form to React.Component InviteForm, where should I have the handleSubmit function? In a container or component?

In addition, after handleSubmit, where there should be code that updates the view to show the user a successful interface - example: Success! Your invitations have been sent.

Evaluate that it is best to solve the above form-reduction life cycle in React. Thanks

+5
source share
1 answer

The basic response pattern (and even more important in rect-redux) is that user actions do not directly lead to actions that change the user interface. User actions result in actions that change state. After the state changes, all components that use this part of the state receive rendering, and they only need to take care to correctly reflect the state.

How this relates to this part of your question: "Also, after handleSubmit, where should there be code that updates the view to show the user a successful user interface - example: Success! Invitations have been sent."

Answer: you do not need the part of the code that updates the view in order to display the success message. You will need a piece of code that will change part of the state (in the creators and reduction reducers) that reflect the successful prompt, for example state.invitationSuccess: true .

Your components will then be responsible for displaying a success message if this part of the state is correct.

As for who should handle the submission, both approaches can be used, one of which the form component processes the view (possibly through a dispatch action) is simpler. When a container processes a view, it can be more flexible when you need to use the same form to edit multiple objects.

+1
source

Source: https://habr.com/ru/post/1269399/


All Articles