Menu
I would like some experienced advise on how to organize my container and component.
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?
442
Lifecycle of Components Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting.
React supports three mounting lifecycle methods for component classes: componentWillMount() , render() , and componentDidMount() . componentWillMount() will be called first followed by the render() method and finally the componentDidMount() method.
Container components can be primarily referred to as the parent elements of other components in a React app. They serve as a bridge between the normal components that render the UI and the logic that makes the UI components interactive and dynamic. The most common function of a container component is to obtain data.
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.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
