Coding Challenge- Navigating to another page by using lifecycle method.
Through out my journey with flatiron school boot-camp. I have had a lot of coding challenges to go through which really helped me acing this new field. During my last phase of the boot camp. I was given a challenge to create a movies list. You can add a new movie in your watchlist and when you hit a submit It should go to that particular movie page. where you can access the submitted information.
As I was using react on redux I had to keep in mind that I am saving all my movies in the redux store. I had to use the lifecycle methods so that my movies list is easily updated whenever a new movies is added too. Lets breakdown some of the following ways I used to create my website.
What is React Redux Store?
A store is an immutable object tree in Redux. A store is a state container which holds the application’s state. Redux can have only a single store in your application. Whenever a store is created in Redux, you need to specify the reducer. As an app gets large and complex, you might want to store large, bulky data inside your Redux store and access it inside a component.
This is my add movie form where I can write about the movie and submit which should take us to a new page of that particular movie that is submitted.
To connect it to the redux store, first I had to add mapstatetoprops to my movies form page from where we are getting the data after adding the movie in our redux store.
mapStatetoprops function is used for selecting the part of the data from the store that the connected component needs. It’s frequently referred to as just mapState for short. … It receives the entire store state, and should return an object of data this component needs.
I am using my reducers to use to dispatch function. Dispatch is a function of the Redux store. You call store. dispatch to dispatch an action. This is the only way to trigger a state change. With React Redux, your components never access the store directly — connect does it for you.
Then I used the lifecycle method to setup a situation and push my current information and render a new page.
What are lifecycle methods?
Lifecycle methods are special methods built-in to React, used to operate on components throughout their duration in the DOM. For example, when the component mounts, renders, updates, or unmounts. You already know the most important lifecycle method, the render method.
The componentDidUpdate function is a part of a React component’s life cycle. It is called when a component got updated. This might happen if new props have been provided by a parent component or an internal state has been changed. … For functional components, you may use React hooks to achieve the same functionality. This function is actually checking if the previous props are equal to the currents props is different then return this which is updating the state of the movie and rendering a new page with the updated information after clicking the submit button.
push() is another approach where we make use of the history props React Router provides while rendering a component. In other words, this works when the component is being rendered by React Router, bypassing the component as a Component prop to a Route. By using these functions I was able to solve the coding challenge and solved my problem.
