I am at the end of my Flatiron School journey, concluding with the React module. The two middleware that are pertinent to understanding the wonders of React is Redux and thunk . Redux is a predictable state container that helps manage state changes in a single store to exhibit consistent behavior on the client side. Redux allows us to avoid prop drilling by providing the ability to connect to store from the component. To change state, we connect our store to the component, using the connect function to dispatch action creators. As soon as our action creator hits, dispatch gets called allowing us to return a function that calls dispatch and pass that action object straight to the reducer. The reducer is a function that updates the state in the store by matching the action type. It returns the updated state. The components connected to the store use mapStateToProps to access the current state from Redux as props. The parent containers then pass those props to the children containers, reflecting the updates on the DOM. When Redux interacts with React, it virtually re-renders the DOM, then updates the DOM with minimal amount of changes required to ensure the performance of the app. To configure store, we pass our reducer(a function that defines action types) in the createStore method which returns a store object. We pass this store object into the Provider component, the provided generic component through react-redux, rendered at the top level so that it can pass store to other components. Lets take a look at an example: This class component is connected to the store . We don’t need to access state from the store so we set the first argument to null. It takes in a second argument of dispatch to an action creator so that we can dispatch the action creator when the action creator function is invoked upon submission.
Spending the past 6 weeks learning JavaScript has been quite a journey. Building my first JS application has been fun and challenging, clarifying a lot of the foundational and technical aspects of JavaScript. The biggest challenge has been piecing it together, creating a JS Frontend Application with a Rails API backend, demonstrating the Client-Server Communication flow. The Flatiron School’s Three Pillars of web programming has served as a mantra throughout the learning and building process. Recognize Events Manipulate the DOM Communicate with the Server
This error message was the bane of my existence during my final Flatiron School React project build but helped me better understand lifecycle components in React. Before delving further into this error message, it is important to understand state and props. State is an instance of an object in a component. It stores properties and values that belong to the component that can change over the lifetime of a component. It can only be stored in a class component. State can be mutated, providing ways to maintain and update info within a component without requiring the parent to send updated info. Thats where props come into play. Props allow us to pass data from a parent component to a child component. They help make components more dynamic and reusable. State is initialized in the constructor, being the first method to run followed by render(). We update state in setState(), which runs asynchronously. We use props to send a callback function. This allows the callback to be part of a different component than the one that invoked the callback. After invocation, the callback can send or mutate data in the parent component. So let’s review, when a parent component wants to send data to the child component, they pass props to their children. When the the child wants to send data to the parent, we invoke callbacks that were passed down by the parents to the children as props. Now, let’s talk lifecycle components. There are lifecycle hooks and 3 lifecycle methods called 1)Before being created (mount), 2)After being created (update), 3)About to be deleted (unmount). The 2 lifecycle hooks available are 1) static getDerivedStateFromProps and 2) componentDidMount. After the constructor is called, static getDerivedStateFromProps gets called, giving us access to any props and state which can be modified. Then render() gets called returning the state and returning JSX for React to insert into the DOM. Then componentDidMount is called after the first render, used to perform DOM manipulation or data fetching. ‘TypeError: Cannot read property ‘value’ of undefined’ is a vague error message that is overwhelming. I realized that it was generally telling me that even though I thought my object WAS defined, it was probably returning that error based on the first call where the initial state was undefined. Or perhaps I had forgotten to pass down props from a parent. Or that the prop that I passed down with an initial undefined or null needed to be defined in a ternary statement to retrieve the defined props. Or maybe it was a prop coming from store in Redux but was missing the value. Using ‘&&’ syntax saved me a lot of headache after going around in circles for awhile. ```{this.props.recipe && this.props.recipe.id} If it is in fact this object and it exists, return this object and its id. This error message will continue to be a part of my life but I have a better grasp on reading and understanding the error message, giving me some ideas on where to retrace my steps and start debugging.
What a rewarding project to complete by Christmas! I had so much fun creating this Ruby on Rails application. There were many challenges but I learned so much in the process, including the the wonderful convenience of the Active Record method, build, and nested forms.
It was so much fun to create an application that I would like to use in the future (with improvements and enhancements as I continue to feed my knowledge of coding, of course).