Forem: Rachel Humes

React with Redux: A Beginner's Guide

Rachel Humes — Sat, 28 Jan 2023 21:46:31 +0000

Another phase at Flatiron is in the books and I finished my first full stack application with React/Rails libraries. It was satisfying to finally put together all the pieces that I have been acquiring at each phase of my bootcamp and create something that was super fun to make!

Along the way, I found that working with state in a more complex application was a little more tricky to manage. This led me to start researching better ways to manage state.

Redux

One of the tried and true ways to manage state is to use Redux. It has been around for quite a few years now and was created to manage state in a more centralized manner and structured so that it is easier to debug. In conjunction with the Redux Toolkit (contains packages and functions that are essential to building a Redux app), it guides you to write code that is predictable, testable and helps ensure your web app will behave correctly. Since it has been around the block for awhile, it also has a robust ecosystem with many different addons for your needs.

However, if you are working with a smaller project, Redux might be more trouble than it is worth since there is a lot of boilerplate code and restrictions. You should probably only implement it when:

You have a lot of state that is needed in numerous components in your app.
The app state is updated frequently over time.
The logic to update a certain state is complex.
The app has a medium to large codebase and will be worked on by many people.

It is important to think about the complexity of your app before deciding whether to use it or not. Usually smaller projects can get away with useContext or simply just lifting state.

Redux's key players: The store, reducer and dispatcher

The store essentially houses your global state. You should not directly modify state held in here and instead create an "action"/object that describes the action you want to invoke. These actions are held in what is called a reducer. They do the behind the scenes work and calculate the new state based on the previous state and action. The dispatcher is what connects UI to the store and successively the reducer. When the event handler (i.e onClick or onSubmit) is invoked, the dispatcher takes the user action and runs it to the store ** which then runs through the **reducer to determine the correct response action and returns the updated state.

Below is an illustration for better visualization of the data flow but we will also go through a simple example of how it works together:

Creating a simple counter with Redux

After installing 'react-redux' and '@reduxjs/toolkit' into our application we need to create a slice. It is a function that allows us to separate our reducer and action logic by the different features within our app.

// slices/counter.js

import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const actions = slice.actions;
export const reducer = slice.reducer;

Within the slice function, we set the name or type as the feature we are trying to create. Then we set the initial state of our counter feature to 0 and create the reducer objects that will return the actions we want to invoke. Make sure to name the actions something that can be easily interpreted by others that will be looking at your code (i.e increment, decrement). Export the actions and reducer.

Next, in our store file we want to configure our store and import the configureStore hook from our toolkit as well as our counter reducer we just created

// store.js

import { configureStore } from "@reduxjs/toolkit";
import { reducer as counterReducer } from "./slices/counter";

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Finally, we need our dispatcher to connect us to the UI. In our App component we will import useSelector and useDispatch hook from 'react-redux'. We take the imported actions from our reducer and set them in our dispatch hook to be invoked upon the onClick event. Finally, the useSelector() hook is important as it takes in the function argument that targets the part of the state we want (the counter) and will allow us to "select" or extract the value for it to be displayed to the user.

// App.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { actions } from "./slices/counter";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <div>
        <h1>Counter</h1>
        <p>{count}</p>
        <button onClick={() => dispatch(actions.increment())}>+</button>
        <button onClick={() => dispatch(actions.decrement())}>-</button>
      </div>
    </div>
  );
}

export default App;

That does it for the basics of Redux! Try it out for yourself and if you have a large scale project on the horizon with a lot of collaborators, Redux might be the right choice for you!

Happy coding!

The Power of Community: Ruby and Grieving

Rachel Humes — Mon, 09 Jan 2023 21:19:09 +0000

Today, I finished up Phase 3 at Flatiron School where we learned another language, Ruby, and how to connect the backend with the frontend via Sinatra. I was able to pass the code challenge and knock out a project that I am pretty proud of, thankfully. Thankfully, because during this phase, it wasn't the content that proved to be the most difficult as I initially expected but it was the unexpected death of my father.

When I got the phone call on that Sunday morning, I felt gutted. I had a code challenge that Thursday but my motivation to get anything done immediately vanished. Writing a single line of code seemed impossible. I told my cohort the news and that I probably wouldn't be at school that week and I was contemplating whether I could even continue this program.

However, it was then I realized how special my community is at Flatiron School. The support I received from them while grieving is something that I will forever be grateful for and after a couple of days being at home and unbelievably sad, I realized I needed to be at school and around their energy to push me to get to the finish line of this phase. So for the rest of the week we all had many study sessions together to make sure that not just me but everyone made it to the next phase together and I am happy to say that we did.

Although, it's going to take awhile for me to feel okay again, I have a great community around me and most importantly, I know my father would want me to continue to pursue my dreams and would be proud of the progress I have made. So this one is for you, dad.

A Guide to useEffect Cleanup

Rachel Humes — Sat, 10 Dec 2022 02:26:57 +0000

Currently, I am in phase two at Flatiron School and the past three weeks have been all things React. I have learned some great concepts that have definitely helped me become a better developer and one of those concepts is cleaning up the useEffect hook.

Why cleaning up is important

Let's say you have a function that continuously runs a timer component in the background

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    setInterval(() => {
      setTime(new Date());
    }, 1000);
  }, []);

  return <div>{time.toString()}</div>;
}

When this component first renders, the useEffect hook will initialize and create an interval that runs every 1 second and set the time. We could then set state and create a button that will hide and show the timer. We might imagine that this also means that the timer will stop running once it is hidden.

function App() {
  const [showTimer, setShowTimer] = useState(true);

  return (
    <div>
      {showTimer ? <Timer /> : null}
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Clock</button>
    </div>
  );
}

However, this is not the case. Once you toggle the button, you will receive an error like the one below

This error indicates that even though the clock is hidden, it is still running continuously in the background and re-rendering the component every second. This could potentially cause unwanted behaviors and performance issues.

The solution to this error would be to create a clean up function that runs once the component is unmounted. With our example it would look a little something like this

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // returning a cleanup function
    return function cleanup() {
      clearInterval(timerID);
    };
  }, []);

  return <div>{time.toString()}</div>;
}

Now once the timer is toggled off, the clean up function will run and clear the interval we set.

The cleanup function lifecycle

The lifecycle of our timer component without the clean up would look like this

And with the cleanup function added to our component's lifecycle would now look like this once the component is unmounted upon the click of the toggle off button

In summary, clean up functions are a great way to optimize the performance of your web app and to avoid unwanted behaviors. However, it is not always necessary to use clean up functions with your useEffect hooks. Scenarios like running timers, clocks or a subscription to a WebSocket connection are a few use cases where a clean up function is important.

Using Destructuring in JS to Write Cleaner Code

Rachel Humes — Thu, 17 Nov 2022 22:42:39 +0000

As a beginner in vanilla JavaScript, I still struggle with writing clean, concise and easy to read code (otherwise known as DRY code). So, I get excited when I learn a method that makes my code look more ✨elegant✨. Today, we will go over how destructuring does just that.

How I initially learned...

Normally, if we wanted to target a specific element in an array we would use the indices of the array. Below we have an array with the first 6 letters of the alphabet. To target the letter A and assign to it its own local variable, we set the variable equal to the letter's index in the array as shown below.

When we console.log the newly made variable we get back the letter A in the original array.

As for objects, we would use dot notation to set new variables to specific elements within the object. Like so...

And when we console.log the new variable it will show the value for the key muppetName...

Now this seems all fine and dandy but what if we had much larger arrays or objects and we wanted to set each element or value to it's own local variable? That would make for a lot of lines of code that is not so easy to read. That's where the wonderful tool of destructuring comes in and cleans everything up.

What is destructuring?

The destructuring assignment syntax was introduced in ES6 and it allows you to take objects and arrays and easily extract the values and assign them to their own variables.

Destructuring arrays

Below we have the same array as before but now we can set each value of the array to its own variable in one line of code. To break this down, the new variables need to equal the index positions of the original array and essentially inserted into a new array. Then the new array must be set equal to the original array variable.

And when we console.log each individual variable the values of the original array will show.

We can also skip values within arrays by taking out value we want to skip and keeping the comma.

This will return

Another pretty useful trick is the ability to copy the rest of the array and put it into a new array using the spread operator.

Adding the spread operator syntax to the array constant then returns

Functions that return arrays can also be destructured as show below

Same concept except the array constant is set to the function call with whatever parameters you want to pass and it will return the added and subtracted values.

As you can see this functionality works well on arrays but the power of it is really shown when it is used to destructure objects.

Destructuring objects

Unpacking objects works in basically the same way as destructuring an array except instead of square brackets we use curly braces and the variables we designate are not based on the index position but on the name of the key in the object.

Since the variables designated in the curly braces match the keys in the object it will return the values of the nestedName and nestedColor...

However, in the instance that we don't want the variable name to match the key name we can easily change it like so

And when we console.log the new variable name it will console the same value.

We can also access the nested key value pairs within the object we are working with and directly assign variables to them as well.

We set the new curly braced variables equal to the nested object we wanted to access and when we logged the variables it returned the values we wanted!

To wrap things up

With all that said, here is a good visual representation of how destructuring cleans up your code when you need to assign local variables to each key value pair in an object...

Dot notation:

Destructuring:

We went from seven lines of code to three! There are a few more cool destructuring tricks we can use to our advantage but these are just a couple of the basic things that I learned that I will definitely be using in my code from now on!