How to structure a React Container and Component to handle a form's lifecycle?

6
votes

I would like some experienced advise on how to organize my container and component.

  • My React Container is InvitePage
  • My React Component is InviteForm

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

Also, after handleSubmit, where should I have the code that updates the view to show the user a success UI - example: Success! Your invites hav been sent.

What's the best practice to solve the above react form-redux lifecycle in React?

1
reactjsreact-reduxredux-form
My first instinct is to make InviteForm purely invitation and get actions and state from props through connect but I'm not sure with redux-form. It seems like this is consistent though, have the submit handler be an action that updates state and map thru mapDispatchToProps, then in the component check if that state is updated and show maybe a banner indicating the invite was sent? - Andrew Li
Interesting, I could see making it work either way just don't know what's the right way in the React world to do this.... - AnApprentice
I'm by no means an expert, but Redux stresses separation of component and container. The component should be a functional component that only presents content based on it's props -- no state. With the container, you pass those dispatchable actions and state to props, it's the brains of the UI -- so you could make submitting an action with the necessary payload then set state, and in the component check for that state change. That's how I would do it but I'm not 'experienced'. - Andrew Li
It may not be the best approach but just sharing what I am doing. In my case, I have made a general form component using redux-form just like. I have to handle submitted data in different ways in different forms. So, I am just passing an onSubmit function as a prop to the Form component from the container and I am using this for success UI, so I don't have to worry about where to show it. :) - Ritesh Bansal

1 Answers

1
votes

Main pattern in react (and even more important in rect-redux) is that user actions do not result directly in actions that change user interface. User actions result in actions that change state. Once the state is changed all components that use that part of state get rerendered, and they only have to take care to correctly render reflecting the state.

How this applies to this part of your question: "Also, after handleSubmit, where should I have the code that updates the view to show the user a success UI - example: Success! Your invites hav been sent." ?

The answer is you do not need part of code that updates view to display "Success" message. You need part of code that will modify part of the state (in redux action creators and reducers) that reflects successful invitation like state.invitationSuccess: true.

Your components will then be responsible to display success message if this part of the state is true.

As for who should be handling submission, both approaches could be used, one where form component handles the submission (probably by dispatching action), is simpler. One where container handles the submission could be more flexible in cases where you would use same form to edit more than one entity.