DEV Community: TrentWard10

Implementing Redux into your React App

TrentWard10 — Tue, 02 Jul 2024 01:16:33 +0000

State management for React applications can often be confusing. On a smaller scale, it is more manageable with things like React’s Context API but for medium and large scale applications, a more robust and organized system is necessary. This is where Redux comes in.

Redux is a predictable state container for Javascript apps. It helps you manage application state in a single immutable state tree. Actions are dispatched to update the state, and components can subscribe to changes in the state. Let’s overview some important Redux terms.

Store: Redux manages the state in a single store. React components can subscribe to the store to receive updates when the state changes.

Actions: Actions are plain JavaScript objects that represent an intention to change the state. They are typically dispatched using store.dispatch(action).

Reducers: Reducers specify how the application’s state changes in response to actions. They are pure functions that take the current state and an action and return a new state.

Selectors: Selectors are functions that extract specific pieces of state from the redux store state.

React-Redux provides bindings to connect Redux with React components. It simplifies the process of passing down state and dispatching actions to components that need them. This accomplishes a few other things as well. First, it helps reduce the clutter in your components and makes them more readable for others. Second, it creates more reusable code through the use of actions. These actions can be called upon in any component that needs them. Take the code below as an example.

This is a simple employee login action which takes credentials entered in by the employee and makes a post fetch request to the backend. It will then dispatch the setEmployee reducer, updating the state, pictured below.

In this picture, a state is created called “employee” as an object with several key/value pairs. Employee, presumably where information about the employee is stored, error to help with any error handling, and isLoggedIn to help with some conditional rendering. The beauty of Redux is that you can include so many different things here in this initialState object, really whatever your code needs to keep track of! From here we move down to the reducers which are state update options that are called upon by your actions. In the action pictured above, it dispatches the setEmployee reducer which does a couple of things. First, it assigns to the employee whatever the “action.payload” is. In this instance, employee is passed into setEmployee which was assigned the “response.json()” from the fetch request and eventually becomes the payload. Second, error remains as null (if error needs to be handled, an action can call the setError). Lastly, it changes isLoggedIn to true which can be used to help conditionally render different aspects of your app. All of this is stored in a file called “EmployeeSlice.js” which is imported into “Index.js”, also sometimes conventionally named “Store.js”. Here, the Redux store is configured and the reducer is assigned to a key like so.

Easy enough. Lastly, wherever your ReactDOM is rendering, you would import the Redux store and wrap it around your app pictured below.

Wrapping it around your app and passing in “store” allows any of your components in your app to access the store and thus, all of what you’ve created in your slice! After creating your components and now needing to actually call any of your actions, one would need to import “useDispatch” from react-redux and whatever slice you need from the appropriate file. The logic in this app for the employee login in the component looks like this.

All but one of the terms were covered above. Selectors are pretty simple to grasp but I will still include an example below. Here, I have imported useSelector from react-redux and then used it to assign a value to both user and employee.

Prior to having Redux in my app, all of my fetch requests and state changes were managed in the components themselves or passed down from parent components. This was great but sometimes made tracking them convoluted and easily led to errors. In an app as small as this, Redux can actually end up adding more code to your project than there would be with useContext. But, the benefit of Redux shows once the app starts scaling and allows for seamless global state management by maintaining a clear separation of concerns. Having this single source of truth for the application state makes it easier to debug and understand how the data is changing over time. There are also additional tools like Redux DevTools which allow you to inspect every action, state change, replay actions, and track performance. Top companies such as Instagram, Amazon, and Robinhood reportedly use Redux in their tech stacks encouraging a large community and app ecosystem which produces many plugins, middleware, and extensions, allowing for a more customizable fit of Redux.

Using Formik with Fetch API

TrentWard10 — Thu, 04 Apr 2024 02:34:33 +0000

Formik has proven to be one of the most useful React libraries currently out there, helping to alleviate much of the headache caused by handling forms. Traditionally, the method for managing state relies on using the useState() hook for each field, adding an event listener, and then using an onChange() method to update them. Formik does all of this for you and more, greatly reducing the amount of code present. It even keeps track of whether each field has been “touched” by the user. You can find a lot of information on how to set up forms using Formik online but there isn’t a lot on combining it with fetch requests. We are going to explore that here to build a simple form.

A key aspect of Formik are the initial values. InitialValues is considered to be one of Formik’s props and is set when the form is first rendered. One assigns these to a variable (typically called initialValues) or as an attribute in the Formik tab (we will talk about this below) which contains a dictionary of key value pairs. The keys would be those variables whose values you want to post in the fetch request. You can see this in the example below.

Then, we wrap all of our form in a Form tag which plays a crucial role in integrating Formik’s form management capabilities into your React components. It establishes a context within which Formik manages form state, validation, and submission logic. A key thing that the Form tag also does is prevent the default behavior of the browser navigating away from the current page after submission.

The values given here are considered to be default values for those keys. It is important to set the default values to the same data type that you intend on posting to your database. For example, the type key has a value of an empty string because the model that this data will post to has the data type of string. Same thing with sub_price being a number, etc. Once we have declared our initial values, we can assign it to an initialValues attribute within the Formik tag as shown below.

This tells Formik that these values are going to be changed by the fields within the Formik form. Using the sub_price as an example, we wrap the Field tag in a tag named FieldContainer like so.

We give it a type of number because this value is going to be an integer, an id and name of sub_price, and then an optional className for formatting if you choose. The sub_price name tells Formik that whatever changes here should be reflected in the value with the key matching this. This is essentially a built in onChange function which would be used to manually handle state. Doing this greatly decreases the amount of code that is needed to write in order to handle all of the form fields. With each of these set up in the JSX, all that is left to do is add a button and the onSubmit={handleSubmit} attribute below the initialValues attribute shown in image 2. Then, set up a handleSubmit function such as one below, passing in values (which is the dictionary of initialValues) which are used in the body of the POST request. Values are passed into the value parameter, null which is the replace in case any of the initialValues are empty, and 2 for the spacer parameter which just increases the amount of spaces in the JSON string output for readability purposes.

We can see that the post request points to a class function in our server section. This function receives the json data and attempts to create a new entry in the Subscription database. Using the same name in both the Formik fields and here help bolster the readability of your code. It then adds and commits the changes before returning a success code of 201.

It is as easy as that. Obviously Formik can be used for much more complex state and form handling but at the barebones, basic level, this shows its power. It will also keep track of any errors that might occur using the ErrorMessage tag and the name attribute pointing at which value you want Formik to monitor.

Another great aspect of Formik is that it provides built-in support for form validation, allowing you to use Yup to define validation rules. It is designed to work well with other React libraries and patterns. Good luck coding!

Designing a Beginner Level CLI with Python

TrentWard10 — Fri, 09 Feb 2024 00:32:07 +0000

As I have learned Python over the last couple of months, one big challenge I ran into was designing a good CLI (command line interface). Many popular ORM (object-relational mapping) tools such as Django and SQLAlchemy allow you essentially bypass the need to create an ORM and CLI yourself. Thus, there isn't much information out there on how to do it all manually. With my journey through Python and SQL almost complete, I would love to share some information that might help make it easier for you to learn.

First thing to address is how it is all connected. We can start with python models which will become essentially databases. In these models, we write a mixture of python and SQL to produce methods. These methods do things. They interact with the database. They add rows of information that we need. They delete, modify, find, etc, whatever we want. Some of the most basic methods you would find in this would be create (either create the database or rows), get_all, and delete. Like so.

There is nothing special added to these but they are essential. Seeing these is great but they don’t actually do anything until we tell them. Once we have created a number of methods that we want to use, we would then move on to what I will refer to as “helper methods”.

Helper methods are exactly what they sound like. Helper methods bridge the gap between the models and their methods shown above, and the CLI. They take information from the CLI and use that to perform the tasks desired. Following the get_all example above, we can see here a helper method being used to call the method and then iterate through to produce something, in this case a print statement.

This will be the building block of creating the CLI because much of the information displayed from these methods will become the options you choose. With that, let’s talk about the CLI.

CLI’s are generally pretty easy to grasp. You display a couple of numbered options, allow the user to input a number corresponding to whatever they want to choose, use a bunch of if statements and continue that trend. But, what if I want the CLI to display the owners from the example above and be able to choose any of those to display additional information or interact with the chosen user? The latter of that is the most important. When you are logged into an account on a website, you want to be able to only see information that is prevalent to you. I don’t want to see the recommended youtube feed from anybody else except what has been tailored to me. With a more serious example, I don’t want a user to be able to access any personal information of another user. All of this is checked and done by the backend. You want to make sure that any edits or private information is shown only to the selected user. We can do this fairly simply and it is shown in the example above. Enumerate is your friend. Enumerate will allow you to print a list of the users beginning at the number one and going until the list reaches the end. From there, you can select which user you want to focus on and move from there. It gets a little bit tricky when you try to access any of those owners along with additional options like adding a new one or backing out of that menu. This is solved by making sure your if statements are in correct order. In my own project, I have structured it so which works for me.

We see at the top a while loop guaranteeing that we stay in this menu until the value of second_choice changes out of 1. From there we move down to the owners being listed through an enumerated iteration and then two additional options listed, add and move back. I create another while loop which serves as essentially the back button. The first if statement I added is exactly that. If the user inputs number equal to the list of owners plus 2, it will print that statement and set second_choice to 0, breaking the user out of that menu and moving up. The create owner does the same thing only after making sure a new user is created. After both of those is where I have added the if statement dealing with the list of owners. Here, I used an elif (else if) statement for a range of 1 to the len of owners + 1 to make sure all options can be selected. Whichever one gets selected there becomes the chosen_owner and moves into another while loop from there. This structure can be replicated numerous times to create an easy to navigate CLI for any user. The finished product looks like this.

Owner menu

Austen has been selected

And we can select the first book to see more information or edit it.

Simple and straightforward but making sure that the menus flow in a direction that allows the user to always know where they are and what they are editing. Happy coding!

Understanding a Fundamental Aspect of React: Components

TrentWard10 — Tue, 07 Nov 2023 16:49:49 +0000

One of the greatest aspects of React is the ability to build various elements of a webpage using what is known as components. These components are built as separate JavaScript files which return JSX to build that section of the page and also be reused in other areas of the application. Doing this also helps the code be more readable as it is spread out among multiple files instead of all in one. This also makes it easier for development teams to work more efficiently as each member could be working on separate components without accidentally overriding each other’s code. Some of the more common components are: search fields, navigation bars, and general page content. Each of these are combined into one parent component (generally named App) to create the UI. In this article, we are only going to focus on functional components.

Functional components use basic JavaScript to perform some action. An incredibly important aspect of all components is their ability to pass down data from parent to child components in the form of props, some of which are established in state. Function components are inherently stateless, and are referred to as thus, but can contain useState hooks. These props are usable within the line of components beginning with where they are created and down through that component’s children (if chosen to be passed). These functions also refer to their direct children for those components to be rendered. This process creates a sort of Christmas tree where the primary app component is at the top and you move down as you refer to each parent’s child components. These child components are considered to be nested and the keywords to create this relationship are “import” and “export”. A popular naming convention for these components is from the point of view of the component itself rather than from its usability from the parent. Doing so also helps maintain the reusability of the component. Let’s take a look at exactly what the useState hook does.

The useState hook takes in the initial state as the parameter and returns an array which holds a function, used to change the state, and an item which holds the state. It is this item that can be used to save almost anything. You can imagine it as an old school memory card that you can save things to and reuse in other systems.

In this example isActive is serving as the item that takes an initial state of “true”. Any time we wish to change the value of isActive, we would call setActive with the new value like so.

You can use the useState function to essentially “overwrite the save”, or update the state, with new or additional information. These two elements, the function and the item from the useState hook, can be used as the props which are passed down to child components. Once passed down, you access these props either directly or through JavaScript destructuring. One of the best places to utilize these props and state are in event handlers. They can be used to save user interaction with the UI or hold data sets that can be populated on the page. OnChange is one of the most common event handlers that you will come across.

Another popular hook to use is the useEffect hook because functional components do not have access to the lifecycle functions like class-based components do. This is not a perfect representation unfortunately though. UseEffect accepts two arguments: function and dependency. The function is exactly what it sounds like. This is what will be executed every time the hook runs. Dependencies are an optional argument and have a wide variety of uses. If you choose to omit it, the hook will run on every render. If you include an empty array, the hook will only run on the first render. However, the array does not have to be empty. You can include a number of things in the array such as props, states, or many other values as long as they are used in the effect.

In this example we see useEffect being used in one of the most common ways which is to fetch a data set once at the beginning in order to populate a web page. In this case, books are being fetched and assigned to the setLibrary function which was declared earlier in state. The anonymous arrow function represents the function portion of the hook. This is probably one of the most simple, but important, uses for this. The empty array at the end represents the dependency and tells the function to run only once and not every time something is rendered on the page.

Components are a fundamental part of any React project. Understanding how to structure them correctly and utilize tools such as hooks are key to building a good web page using React.

Event Listeners: A Journey Through JavaScript's Interactivity with the DOM

TrentWard10 — Thu, 27 Jul 2023 03:34:04 +0000

Event listeners are precisely those things that bridge the gap between humans and webpages. They are the interactions that allow the web page to be reactive to various actions we can take. Whether it be clicking on a submit button to fetch data or hovering your mouse over an element to flip it and reveal information on the other side, event listeners do that for us. There are many uses for this so how do we create them?

There are various event listener methods but the one I will focus on in this is the most widely used, the addEventListener() method. This has three parameters (and an optional fourth):

An element being given the event listener
An action triggering the event
A function
A boolean (optional)

The first is what you are attaching the event listener to. In the example below we see that the HTML element with an ID of "add-book-button" has been attached to a variable named "addBtn". This "addBtn" is merely a reference to that element so any interaction with it will affect whatever element has that ID.

The second is the triggering event that we declare. In the screenshot above, we see that the event stated is "click". Click is one of many that could be used but is the most common as various forms and buttons will listen for this. Without this, the event listener wouldn't know what specific action it is listening for.

The third is the function that runs once the event is triggered. Using the form example from above, this could be a fetch request that is sent using whatever data has been entered into the desired fields. Functions here could be anonymous using the common arrow function or could be named. It is best to use an anonymous function if you know this is only going to be used once, otherwise you should declare the function and invoke it here. Both are depicted below.

In all of the examples shown above, the targets for each event are HTML elements but it is important to note that almost any element can be the event target. They can also handle multiple event handlers. Some of the most common events are Mouse events which consist of:

click
dbclick
mousemove
mouseover
mouseout
mouseup
mousedown

An important concept to understand with event listeners is what most will call "bubbling". This only occurs when the event is triggered on a child inside a parent element and will cause the event to bubble up to the parent meaning a click, for example, will trigger on both the child AND the parent elements. There are some events that do not bubble up but most will. Developers will often take advantage of this to decide the order in which events will fire.

While it is important to know how to add event listeners to elements, it is also important to understand how to remove them. Thankfully, this is quite straightforward using the removeEventListener function. This would look something like this:

When using the removeEventListener function, it is imperative that the function being called after the event stays exactly the same, otherwise the function will not be removed. A second option to remove event listeners is to actually make them useable only once. In the addEventListener function, there is an optional third parameter with a property called once. When set to true, the event listener will only run one time, thus essentially removing it after. There is one other, but much less common, option to removing an event listener and that is through the AbortController. This will use a count that when a certain limit is met, the function will be aborted and the event listener removed. Though less common, AbortController can be very useful in certain situations.

This can be a difficult concept to understand at first. When I was first learning about it, how I was able to understand it was picturing a piece of tape that you attach to each element for it to carry. It will stick with it until you rip it off. Event listeners are incredibly important because they are the representation of human interactivity with the interface that you build. Without them, it would be much more difficult to transfer data and, more importantly, the webpages wouldn't be nearly as engaging. When building websites, it is important to remember that it is another human that is going to be navigating your sites. Do all you can to kindle that fire of curiosity and wonder as they venture through your website.