DEV Community: Connor Vosberg

Redux Toolkit - The Best in Global State Management

Connor Vosberg — Wed, 13 Dec 2023 18:08:08 +0000

As I near the completion of my Flatiron School capstone project, I wanted to reflect on my decision to implement Redux Toolkit for managing global state over ‘useContext’. Having experienced the ease and effectiveness of ‘useContext’ in a previous project, I hesitated initially to transition to Redux for my capstone. However, looking into Redux Toolkit capabilities more, I discovered its amazing benefits, particularly as an application grows in size and complexity.

Although there is a learning curve and the setup process involves many steps with a bit of boilerplate code to implement, the advantages gained are significant. Redux Toolkit’s ability to centralize all state management related logic into one place, offers a lot of clarity within the other components of the application.

Alright let’s jump in to setting up Redux Toolkit in your application. To install Redux Toolkit and its necessary dependencies, navigate to your project directory in the terminal and enter the following commands:

npm install @reduxjs/toolkit
npm install react-redux

The first command ‘npm install @reduxjs/toolkit’ installs the essential Redux Toolkit package and provides the tools for state management in your application. The second command ‘npm install react-redux’ installs a package specifically to use with React. It offers special bindings that are important for integrating Redux into your React application.

Great, now that Redux Toolkit is installed, let's set up the necessary boilerplate code to initialize and configure our Redux Store.

Let's start by creating a folder called ‘redux’ in the ‘src’ directory. This folder will serve as a home for all of our Redux related files. Inside the ‘redux’ folder, we will begin by creating the file to set up our Redux Store. This file can be named anything you like, but for simplicity, I am going to call it ‘store.js’.

This code snippet utilizes ‘configureStore’ from Redux Toolkit. It encapsulates a lot of functionality behind the scenes which simplifies our setup process. This file acts as the central command where all of your other Redux slices will converge. The ‘reducer’ field inside ‘configureStore’ is where you’ll include different slices of your applications state.

With the redux store setup, we can finally create what’s called a ‘slice’, which represents a specific portion of the application’s state. The following code snippet builds a slice called 'userSlice'. Let’s go over each of its components to understand what each part does:

The ‘createSlice’ function imported from Redux Toolkit, allows us to create the slice that will hold a portion of the applications state, in this instance, the user’s state. We then declare and export ‘userSlice’ which is a constant that utilizes the createSlice function to pass in pertinent information.

‘name’: Reflects the name of the slice, in this case ‘user’.
‘initialState’: This field establishes the initial state of the ‘userSlice’. In this case, it is initialized as null, but the initial state can differ depending on your desired outcome.
‘reducers’: This section defines the functionality responsible for updating the state. In this example, we defined a very simple reducer called ‘setUser’, when dispatched, will update the state of the user, with the value passed in called the ‘action.payload’.

Within the ‘setUser’ reducer, there are two parameters present: ‘state’ and action’

‘state’: Represents the current state of the ‘user’ portion of the application. It’s important to maintain immutability, so remember to use the spread operator when updating state.
‘action’: Refers to the action passed into the ‘setUser’ reducer when it is invoked.
‘action.payload’: Contains the new data that is passed when ‘setUser’ is called.

As a whole, the userSlice contains all of the information needed to alter the ‘users’ state. As the application grows, you can create additional reducers to manage different aspects of your state.

Now that we have built out our Redux Store and defined a slice (‘user’), there are just a couple more steps to fully utilize redux in our application.

Remember, our Redux Store acts as a central hub for every slice we define. In order to have access to ‘userSlice’ in the rest of our application, we need to import it into ‘store.js’. This enables us to dispatch actions related to the ‘user’ throughout the application.

In this code snippet, we import ‘userReducer’ from the ‘user.js’ file. The reducer object within the 'configureStore' function now needs to be modified. Here, we assign ‘userReducer’ a key of ‘user’. This essentially links all of the reducers within ‘userSlice’ to the key of ‘user’ in the store's reducers.

The last step to complete is to ensure the entire application has access to the Redux store. We can achieve this by importing ‘Provider’ from ‘react-redux’ and wrapping our main application component, with the ‘Provider’ component, in our ‘index.js’ file.

In this code snippet, ‘Provider’ is wrapped around the ‘App’ component and ‘store is passed as a prop to the provider component. This grants access to the Redux store throughout the entire application. Every component defined within ‘App’ or any children of ‘App’ will have access to anything defined in the Redux Store.

Global State Achieved!

Now that our Redux setup is complete, accessing and updating a specific slice of the applications state becomes fairly easy and straightforward. For example, if we wanted to update the state of our user upon initialization of the application, we could do the following:

In this code snippet, we imported ‘useDispatch’ and ‘useSelector’ from ‘react-redux’, which give us the necessary tools to dispatch actions and select a specific portion of the applications state. Additionally, we’ve also imported ‘setUser’ which corresponds to our ‘setUser’ reducer that was defined earlier in the ‘userSlice’.

When the application is initialized (triggered by the empty dependency array in ‘useEffect’), the ‘dispatch’ function dispatches the ‘setUser’ action with the ‘sampleUser’ object passed into it, therefore, updating the state of the user. The ‘useSelector’ fetches the ‘user’ state from the Redux store allowing us to display the user information to the web page.

At first glance, the steps involved and time spent just to do something as simple as setting the user upon the app's initialization, may seem extensive. However, this example is just a simplified explanation showing how easy it is to interact with the Redux store to select or update specific portions of your applications state. Having everything neatly organized and easily accessible will streamline your ability to manage the global state of the application. With Redux, even as your application grows and becomes more complex, maintaining and modifying state is as easy as ever.

Ruby on Rails - Generators

Connor Vosberg — Wed, 27 Sep 2023 18:17:03 +0000

Introduction

In Ruby on Rails, writing the same boilerplate code over and over again can become repetitive, time consuming, and error-prone. Luckily, Rails offers a great solution called 'generators' which streamlines the process of creating essential components, such as models, controllers, migrations and more. In this post, we will discover how to use Rails generators as well as how they improve development efficiency and accuracy.

Before we dive into the most common uses of rails generators and how to use them, let’s go over some important guidelines to use these powerful tools to the best of their ability.

Naming Conventions: Rails follows specific naming conventions for all of its components, so it's important to keep in mind what rules go with which type of generator you are using.
Generator Options: Rails generators come with extra options that allow you to further customize the code that is generated. For example, you could add specific attributes to a model when writing it in the terminal as opposed to defining them after the model is generated.
Documentation and Help: You can access specific documentation or help for a specific generator by running rails generate generator_name --help. For example, running rails generate model --help will return all the necessary information that goes along with generating a model.

To set up Rails generators, you first need to create a new Ruby on Rails application. You can do this quickly by entering the following command into your terminal:

rails new YourAppName

You can then navigate into your applications root directory and run bundle install, which will read the Gemfile for your project and install all of the required gems and their dependencies. Since generators are an important part of Rails, they will be automatically available once your application is set up. Finally, with your Rails app set up and gems installed, you can now make use of Rails generators to create various components of your application.

A few of the most common generators used in rails and the ones we will go over here, are for generating a model, controller, migration, or a resource.

Model

Let’s start off with the model generator. Generating a new model will simply just create a new model as well as the migration file for creating the corresponding database table with the specified attributes. When generating a new model, type the following into the console:

rails g model ‘ModelName’ attribute1, attribute2:integer

You can use rails g or rails generate for the first portion, followed by the type of thing you want to generate, in our case, a model, followed by the ModelName, in its singular form, followed by the attributes associated to the model. When adding our attributes, everything will default to the data type of string unless it’s specified otherwise in the format: attribute:data_type

Here’s an example of a generated Hike model: rails g model Hike name difficulty:integer location
Model:

Migration:

Controller

The next generator we're going to cover will be the controller generator. If we wanted to generate a new controller for a Hike model we run the following in the terminal:

rails g controller Hikes

When generating a controller, we use a model's name in the pluralized form. This command will generate a file called 'hikes_controller.rb' in the 'app/controllers' directory. This file contains the code for the HikesController which is responsible for handling various HTTP requests and responses.

Here’s what our HikesController would look like after it is created:

Migration

The next generator we will cover is going to be the migration generator. Migrations are a way to manage your database over time and update or remove data when necessary. To generate a migration, you run the following in your terminal:

rails g migration NameOfMigration

The name of your migration should reflect the changes you’re making to the database schema. For example, if we wanted to add a length attribute to Hikes, we could run:

rails g migration AddLengthToHikes

When this command is run, a new migration file will be created in the ‘db/migrate’ directory with a timestamp and the name that was provided. So our file from above might look something like ‘20230922192325_add_length_to_hikes.rb’. You can then open the migration file and define the changes you wish to make. You can use various methods in the migration file to make changes to the schema. Some common methods include, add_column, remove_column, create_table, drop_table, etc. For our purposes, we will focus on add_column. Here’s an example of adding a length column to the hikes table:

Finally, to apply the change you’ve made and to update the schema to reflect those changes, you would run rails db:migrate in your terminal.

Resource

Last but not least, we are going to cover the resource generator, one of the most powerful generators. Upon generating a new resource, many new files are created including the Model, Controller, Migration files like we've seen above, as well as an updated the ‘config/routes.rb’ directory with RESTful routes for the resource, including index, show, create, update, and destroy.

To generate a resource for Hike, you would run the following in your terminal:

rails g resource Hike name difficulty:integer location length:integer

After running this command, you will have access to all of the files defined above as well as a RESTful routes for the resource as seen below:

All in all, using generators is a very helpful and powerful resource to use when creating a Rails application and it can increase productivity, decrease repetitive code, as well as reduce possible errors.

Instance Methods & Class Methods in Ruby

Connor Vosberg — Fri, 30 Jun 2023 21:36:16 +0000

Ruby is a dynamic object oriented programming language that was created in the mid-1990s by Yukihiro “Matz” Matsumoto. He was a master of many programming languages and combined the best parts of all of them to create Ruby. This resulted in a powerful and flexible programming language that is very popular among developers. One of the key fundamentals of Ruby is its object-oriented nature, which revolves around objects and classes.

In Ruby, classes are used to define what behavior and attributes are applied to objects. A class is best thought of as a data type and serves as template for creating objects, while objects are single instances of a class. With that being said, developers use ‘Instance Methods’ and ‘Class Methods’ to help define the desired behavior and attributes of an object or a class.

When writing both instance and class methods in Ruby, there are several important tips to keep in mind. First and foremost, it's crucial to choose meaningful names for your methods that accurately reflect their functionality and purpose. This ensures that the purpose of the method is clear and easily understood by other developers.

Similarly, when defining parameters for methods, it's important to choose descriptive names that act as placeholders for the actual values that will be passed into the method. This enhances the readability and maintainability of your code.

To make your methods easier to understand, it's best to simplify the method body. This can be achieved by breaking down the tasks performed by the method into smaller, hyper-specific functions. By doing this, the code becomes more modular which enhances code readability and maintainability.
Lastly, always remember to test your methods thoroughly to ensure they are working as intended. Writing test methods or simply testing out method calls in the terminal can help catch any bugs or issues that may arise in your code.

With all of that in mind, let's get into the specifics of instance methods and class methods, and how to use them.

Instance Methods

Instance methods are defined within a class definition and they are used to define a specific behavior for an object. They are useful when you want different instances of the same class to have different behaviors.

Defining Instance Methods:

Instance methods are defined as follows:

The method is defined with the class definition of Circle. The def keyword is used followed by the name of the method. Then, the code that will define the behavior of the method will be written on the following line. The end keyword completes the method definition.

Calling Instance Methods:

To call an instance method on an object, we would need to create a new instance of the class and then use dot notation to call a specific method.

In this example, we created an instance of the Circle class called circle1 and passed in the parameter "5" to set its radius upon initialization. Then, we called the "area" instance method on circle1 which returned 78.5.

Using 'self' Keyword Within Instance Methods:

When using the 'self' keyword in an instance method, 'self' is referring to the object that the method is being called on.

In this example, when we call print_area on circle1, the message is printed out to the console. By calling the area method on 'self', the code is more dynamic and can be used across many instances of circles that are created.

Instance methods are best used when you are trying to define a behavior specific to an individual object or instance of a class.

Class Methods

Class methods are used to define behavior for the entire class as a whole as opposed to a particular instance of that class.

Defining Class Methods:

To define a class method, you use the def keyword followed by the method name and the method body that gives the method its specified behavior. The 'self' keyword is prepended to the method name to indicate the method belongs to the class itself and not an instance of that class.

Calling Class Methods:

To call a class method we simply invoke the method directly on the class by using the class name followed by the method name.

In this example, we have a class of Calculator and a method called 'self.sum'. Remember, since the method is prepended with 'self', we know it is a class method. The method takes two parameters, num1 and num2, and prints the result. When sum is called on Calculator with (5,5) passed as parameters, the result is 10.

Class methods are best used when you want to perform an action that is not specific to an individual instance, but rather the class as a whole.

Information Flow in React

Connor Vosberg — Thu, 06 Apr 2023 16:36:38 +0000

React is a popular framework used to create web applications because it manages the state of the application, renders components, and has an efficient and effective way of handling information flow. Understanding the importance of information flow between components in React is crucial in developing efficient and maintainable applications.

I just finished a phase in my coding boot camp going over React, and although I'm still far from being an expert, I believe I can offer a good perspective on the importance of information flow in React applications. When I first began my React journey, I always found myself setting state in the first component where I needed it, and forgot to ask myself the question: "What other components might need access to this information?". I quickly found out the importance of information flow when React applications began to become more complex and the challenges that came with managing the flow of information between different components. This entire process became so much easier by simply planning out my component hierarchy prior to building the application.

One of the essential concepts in React is that information can only be shared between a parent and a child component, either passing data down via props or back up via a callback function. This means that if two child components need access to the same information, it's best to have that information stored in a parent component. This is another instance where having a good plan of your component hierarchy and a set end goal for your application can have a dramatic effect on the way you pass information throughout it.

Passing information as props

I'll start with the easiest way to pass information from one component to another: Parent to Child. This can be achieved via props. Props can be sent from a parent component and accessed in the child component.

In the example below, we have toyData stored in state as toyList in the App component, and we are sending it down to the Toys component via props.

The Toy component can then access all of the information passed down in toyList and display whatever aspects are wanted to the DOM or even pass the information down as props to another child component.

You might be wondering: "Why not just import the toyData directly into the Toys component?". This method would be alright for a very simple react application that doesn't have other components. However, in practical application, keeping toyData available in the App component, allows for easy management of information flow and makes it simple to pass information down to multiple child components that may be created in the future.

Passing information via callback functions

However, there may be instances where information needs to be passed up from a child component to a parent component. This is where the concept of inverse data flow comes in. This allows a parent component to access data from a child component by utilizing a callback function. Using callback functions is useful when you need to update state in a parent component based on user input in a child component. The parent component would pass down a callback function to the child component via props and then the callback function would be called in the child component, passing some data from the child component into it.

In the example below, a simple NewToy component has been created with an input form to create a New Toy. When the form is submitted, the input values are entered into a key: value pair and saved as a const newToy.

We need to get this data back into our parent component, the App component. To achieve this, we create a callback function in our parent component and call it in the child component.

Now, when we run the handleSumbit function, we can pass our addToy function into it as a callback and pass it the newToy const. Then our newToy can be accessed by the App component and update the toyList to reflect the added toy.

In summary, the importance of information flow in React cannot be overstated. It is important to plan the information flow before starting to build the application, especially in complex applications. It's important to pay attention to component hierarchy and think about which components need access to which data. The ability to pass information as props or via callback functions makes it easy to manage information flow efficiently. By understanding these concepts, developers can create applications that run more efficiently and are easier to read and debug when necessary.