DEV Community: Daniel

Understanding Redux: A Simplified Guide

Daniel — Sat, 30 Mar 2024 05:03:46 +0000

Introduction

In the world of React development, managing state effectively is key to building robust applications. As your projects grow in complexity, you'll encounter challenges like prop drilling. Enter Redux – a powerful state management library that simplifies how you handle data in your React apps. In this guide, we'll focus on the basics of Redux, highlighting its resemblance to useContext, the importance of useDispatch and useSelector, and how it eliminates the need for prop drilling.

The Basics: What is Redux?
Redux is like having a big toy box shared by everyone in your game. Just like how you and your friends can access toys from this shared box without passing them around, Redux provides a central place (the store) for your app's data, making it accessible to all parts of your application without needing to pass data through each component (prop drilling).

Understanding Dispatch and Reducers

Dispatch: The Action Trigger
Think of dispatch as a magic button that triggers actions in Redux. When you click this button (dispatch an action), Redux knows what to do with it. It updates the state based on the action type and payload, just like how clicking a button in your game triggers a specific action.

Reducers: The State Managers
Reducers are like rule books that tell Redux how to update the state. They take the current state and an action, and based on the action type, they return a new state. It's similar to how rules in a game determine what happens next based on the actions players take.

javascript

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

The Power of Redux Toolkit

Redux Toolkit simplifies Redux setup by providing utilities like createSlice. It helps you define initial state and reducer functions in a concise way, making your code more readable and maintainable.

Connecting Components with Hooks
Redux Hooks
const dispatch = useDispatch(); const followedEvents = useSelector((state) => state.event.followedEvents);

Explanation:
useDispatch(): This hook gives you access to the dispatch function provided by Redux. With dispatch, you can trigger actions that update the Redux store, leading to state updates across your application.

useSelector((state) =>state.event.followedEvents):This hook allows you to extract specific data from the Redux store state. Here, it selects the followedEvents array from the event slice of the Redux store. Whenever the selected state changes, the component automatically re-renders, ensuring it stays up-to-date with the latest data from the Redux store.

To reiterate,
useDispatch: Triggering Actions
useDispatch is like having a direct line to the action dispatcher in Redux. You use it to dispatch actions from any component without passing them down through props. It's as if you can magically trigger actions from anywhere in your app.

useSelector: Accessing State
useSelector is your window into the global state. It allows you to pluck out specific pieces of state from the Redux store. With useSelector, you can access the shared toy box (global state) and get the toys you need without having to ask anyone.

Conclusion

In essence, Redux simplifies state management by providing a centralized store, eliminating prop drilling, and offering powerful tools like useDispatch and useSelector. Just like understanding the rules of your favorite game, mastering Redux basics ensures smoother development experiences and more efficient React applications.

Remember: With Redux, you're not just building apps – you're crafting experiences. So, embrace the simplicity, harness its power, and keep coding forward!

Understanding createContext in React: A Comprehensive Guide

Daniel — Sun, 18 Feb 2024 20:58:41 +0000

createContext is a powerful feature in React that allows you to manage state and share data between components without having to manually pass props down through each level of the component tree. In this guide, we'll explore how to use createContext by walking through an example implementation and discussing its benefits.

What is createContext?

createContext is a function provided by React that creates a context object. This context object comes with two components: Provider and Consumer (or alternatively, the useContext hook). It enables you to pass data to components deep within the component tree without having to explicitly pass props through each level.

Example Implementation

Let's consider an example where we want to manage user authentication state and cost-related data for a shopping application. We'll use createContext to create two context objects: UserContext and CostContext.

// UserContext.js
import { createContext, useState } from "react";

const UserContext = createContext({});

const UserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [loggedIn, setLoggedIn] = useState(false);

  const login = (user) => {
    setCurrentUser(user);
    setLoggedIn(true);
  };

  const logout = () => {
    setCurrentUser(null);
    setLoggedIn(false);
  };

  return (
    <UserContext.Provider value={{ currentUser, loggedIn, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

In this example, we create a UserContext using createContext and provide a UserProvider component. This provider component encapsulates the state related to the current user and authentication status. It exposes this state and relevant functions to its children via the value prop.

Similarly, let's create a CostContext for managing cost-related data:

// CostContext.js
import { createContext, useState } from 'react';

const CostContext = createContext();

export const CostProvider = ({ children }) => {
  const [selectedRaceCost, setSelectedRaceCost] = useState(0);
  const [shipPacketCost, setShipPacketCost] = useState(0);
  const [cartItemsCost, setCartItemsCost] = useState(0);
  const [tshirtSize, setTshirtSize] = useState('');
  const [couponCode, setCouponCode] = useState('');

  return (
    <CostContext.Provider
      value={{
        selectedRaceCost,
        setSelectedRaceCost,
        shipPacketCost,
        setShipPacketCost,
        cartItemsCost,
        setCartItemsCost,
        tshirtSize,
        setTshirtSize,
        couponCode,
        setCouponCode,
      }}
    >
      {children}
    </CostContext.Provider>
  );
};

export const useCost = () => useContext(CostContext);

Here, we create a CostContext using createContext and provide a CostProvider component to manage cost-related state. The useCost hook allows components to access this context.
Consuming Context

Once we have defined our context and providers, we can consume them in any component using either the Consumer component or the useContext hook.

// PurchaseSummary.js
import { useCost } from '../../context/CostContext';

const PurchaseSummary = () => {
  const { selectedRaceCost, shipPacketCost, cartItemsCost } = useCost();

  // Rest of the component implementation
};

In this example, the PurchaseSummary component accesses cost-related state from the CostContext using the useCost hook. This allows the component to retrieve and use the cost data without needing to pass it down through props.

Conclusion

In summary, createContext is a powerful tool provided by React for managing and sharing state across components. By creating context objects and providing them through provider components, you can efficiently manage global state and avoid prop drilling in your React applications. Whether you're dealing with user authentication, application themes, or any other shared state, createContext can help streamline your development process and make your code more maintainable.

*Here is the github respository to see the rest of the code for the Marathon Signup Form: Run Your Socks Off

Python: A Deep Dive into Instances, Class Methods, and Instance Methods

Daniel — Wed, 06 Dec 2023 20:13:11 +0000

In Python, classes and instances play a fundamental role in object-oriented programming (OOP). In this blog, we’ll explore the concepts of instances, class methods or @classmethod, and instance methods (isinstance) in Python to understand their purposes and use cases.

Instances in Python:

**Definition: **An instance is an individual occurrence of an object created from a class. It represents a specific realization of the class, with its own unique attributes and behaviors.

**Use Case: **Instances allow you to model and work with specific entities in your program. For example, if you have a Person class, instances of that class could represent individual people, each with their own name, age, and other attributes.

Example:
python

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age

person1 = Person("Alice", 25)
person2 = Person("Bob", 30)

In this example, person1 and person2 are instances of the Person class.

Instance Methods in Python:

Definition: Instance methods are methods that are bound to an instance of the class. They take self as the first parameter, representing the instance on which the method is called.
Use Case: Instance methods are used for operations that involve a specific instance of the class. They can access and manipulate the attributes of the instance.

class Car:
    def __init__(self, brand, model):
        self.brand = brand
        self.model = model

    def display_info(self):
        print(f"{self.brand} {self.model}")

car_instance = Car("Toyota", "Camry")
car_instance.display_info()

In this example, display_info is an instance method that accesses and prints information specific to the car_instance.

Class Methods with @classmethod

Definition: In Python, a class method is a method bound to the class rather than the instance of the class. Decorated with @classmethod, these methods take the class itself as the first parameter, conventionally named cls. One practical use case for class methods is creating instances of a class based on external data, such as database rows.

Use Case: Class methods are useful for operations that involve the class but not a specific instance. Commonly, they are used for tasks such as creating instances based on external data, such as from an instance_from_db method.

Practical Example: instance_from_db
Check out the following class method named instance_from_db:

@classmethod
def instance_from_db(cls, row):
    user = cls(row[0], row[1]) if row else None
    return user

Here, instance_from_db is designed to create an instance of the class it belongs to (cls) based on data retrieved from a database. It assumes that the order of data in the row corresponds to the attributes of the class.

Note: maintaining the column name and the order in which it is presented is important

@classmethod
   def find_by_symbol(cls, symbol):
       sql = """
           SELECT *
           FROM crypto_coins
           WHERE symbol = ?
       """
       row = CURSOR.execute(sql, (symbol,)).fetchone()
       return cls.instance_from_db(row) if row else None
@classmethod
   def instance_from_db(cls, row):
       return cls(row[0], row[1], row[2]) if row else None

This method is valuable in scenarios where you retrieve data from a database and want to convert it into instances of your class. It encapsulates the logic of creating an object from raw database data, providing a clean and centralized way to handle such conversions, adhering to rules of reusability and readability.

Application in find_by_name

Let’s see how instance_from_db is utilized in a practical scenario. Consider the following method, part of a User class, that retrieves a user from a database based on their username:
python

@classmethod
def find_by_name(cls, username):
    sql = """
        SELECT *
        FROM users
        WHERE username = ?
    """
    row = CURSOR.execute(sql, (username,)).fetchone()
    return cls.instance_from_db(row) if row else None

In this method, the find_by_name function executes an SQL query to fetch a user's data from a database. It then uses instance_from_db to convert the retrieved database row into an instance of the User class. If no row is found, it returns None.

This design choice allows for a clean separation of concerns and promotes code readability. The logic for creating instances from database rows is encapsulated within the class, making the code more modular and maintainable.

Checking Object Types with isinstance

Definition: The isinstance function is a built-in Python utility used to check if an object is an instance of a particular class or a tuple of classes. It takes two parameters: the object to be checked and the class or tuple of classes to check against.

Use Case: Object Type Validation
Consider a scenario where you have different classes representing animals, such as Dog and Cat. You can use isinstance to check the type of an object:

class Dog:
    pass

class Cat:
    pass

dog_instance = Dog()
cat_instance = Cat()

print(isinstance(dog_instance, Dog))  # True
print(isinstance(cat_instance, Cat))  # True

print(isinstance(dog_instance, Cat))  # False
print(isinstance(cat_instance, Dog))  # False

In this example, isinstance is employed to verify whether dog_instance is an instance of the Dog class (which it is) and if cat_instance is an instance of the Cat class (which it is). It returns False when checking against classes to which the object does not belong.

Handling Multiple Types

isinstance can also handle cases where an object might be an instance of any class in a tuple:

print(isinstance(dog_instance, (Dog, Cat)))  # True
print(isinstance(cat_instance, (Dog, Cat)))  # True

In this case, it returns True for both instances because they are instances of at least one of the classes in the tuple.

Why Use Class Methods and Instance Methods? (Recap)
Class Methods: Class methods are useful when you need to perform operations related to the class itself rather than a specific instance. For example, class methods are bound to the class rather than an instance.

It is defined by the “@classmethod” decorator, and taking the ‘cls’ as its first parameter, and is useful for initializing and modifying class attributes.

class MyClass:
    class_variable = "I am a class variable"

    @classmethod
    def class_method(cls):
        print(cls.class_variable)

MyClass.class_method()

Instance Methods: Instance methods are essential for working with and manipulating specific instances of a class. They take “self” as its parameter, and are powerful because they have access to both class-level attributes and instance-specific attributes.

class Dog:
    def __init__(self, name):
        self.name = name

    def bark(self):
        print(f"{self.name} says Woof!")

my_dog = Dog("Buddy")
my_dog.bark()

Incorporating @classmethod and isinstance into your Python codebase enhances the clarity and flexibility of your object-oriented design. Class methods simplify the creation of instances based on external data, promoting modular and maintainable code. Meanwhile, isinstance empowers you to perform type checking, allowing for robust and versatile program behavior.

By using these concepts, you can achieve a more organized structure in your Python projects. Now go code your next Project!

Here is my Phase 3 Project for your own personal Crypto Portfolio which uses the above concepts, for reference:

https://github.com/BookmDan/phase3_crypto

Once you fork, and git clone:

download install pip
“pipenv install’ and “pipenv shell” to start your environment
and then run “python lib/cli.py” and the command line menu should pop up

useEffect() vs useState(), props vs callback, Dependency types for useEffect

Daniel — Fri, 03 Nov 2023 19:49:16 +0000

useEffect() vs useState()

useState is a React hook used to manage and update state within a functional component. It's a way to store data that can change over time and cause re-renders based on any changes. It also allows you to declare and update a piece of local state within a component. This can be useful for when you need to keep track of data that may change over time and want to trigger a re-render when the state changes.

As a simple example, here is a counter using useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
    </div>
  );
}

Other use cases include managing input values, toggling UI elements, or storing and updating data specific to a component.

useEffect is another React hook used to perform side effects in a functional component. Side effects include data fetching, DOM manipulation, setting up subscriptions, and more. It allows you to run code after the initial render and in response to changes in state or props.

Here is an example:

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchApi()
  }, []); // Empty dependency array means this effect runs once after the initial render

  const fetchAPI = () => {
  // Fetch data from an API
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
   }

  return (
    <div>
    {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );

}

UseEffect is useful for when you need to interact with the outside world, handle asynchronous operations, or perform cleanup tasks when the component is unmounted.

useState is used to manage component-specific state, while useEffect is used to handle side effects or actions that are not directly related to component state but need to be triggered based on changes in state or props. These two hooks are essential components to build React projects with.

props vs Callbacks

Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only; the child component cannot modify its props directly. They are intended for communication and data transfer between components. Props are defined when you render a component and are passed as attributes in JSX elements.The parent component then sets and updates the props of its child components.

In our PlayerCard.js for example, 'player' is an example of a prop, which is passed down from PayerList.js:

import React from 'react';

const PlayerItem = ({ player}) => {
  const offensiveRating = ((player.PTS / player.minutes_played) * 100).toFixed(2);
  const defensiveRating = (player.BLK * 0.6 + player.STL * 0.4).toFixed(2);

  return (
    <div className="card">
    <div className="card-content">
        <h2>{player.player_name}</h2>
        <img src={player.image} alt={player.player_name} className="player-avatar" />
        <p>Points: {player.PTS}</p>
        <p>Offensive Rating: {offensiveRating}</p>
        <p>Defensive Rating: {defensiveRating}</p>
        <p>Assists: {player.AST}</p>
    </div>

    </div>
  );
};

export default PlayerItem;

import React, { useState} from 'react';
import PlayerCard from './PlayerCard'; 
import NewPlayerForm from './NewPlayerForm';  

// send props from App.js 
const PlayerList = ({players, isDarkMode, toggleDarkMode, handleAddNewPlayer}) => {

  return (
    <div className={isDarkMode ? 'dark-mode' : 'light-mode'}>
      <nav>
        <button onClick={toggleDarkMode}>
          {isDarkMode ? 'Light' : 'Dark'} Mode
        </button>
      </nav>

      <div>
        {players.map((player) => (
          <PlayerCard key={player.id} player={player} />
        ))}
      </div>
    </div>
  );
};

export default PlayerList;

Playerlist loops through a map of props 'players' which is passed down from App.js:

 <PlayerList
   players={players}
   toggleDarkMode={toggleDarkMode}
   isDarkMode={isDarkMode}
 />

Callbacks, on the other hand, involves passing functions as props to child components. This allows the child component to trigger functions defined in the parent component, enabling communication and actions to be initiated in the parent component based on events or user interactions in the child component.

From our App.js, we have toggleDarkMode which is an example of a callback function:


  const toggleDarkMode = () => {
    setIsDarkMode((prevIsDarkMode) => !prevIsDarkMode);
  };
return (
    <Router>
      <div>
         ...
       <Route
          path="/"
          element={
            <PlayerList
              players={players}
              toggleDarkMode={toggleDarkMode}
              isDarkMode={isDarkMode}
            />
          }
        />
     </div>
   ...

We can also access toggleDarkMode from PlayerList.js

const PlayerList = ({players, isDarkMode, toggleDarkMode, handleAddNewPlayer}) => {

  return (
    <div className={isDarkMode ? 'dark-mode' : 'light-mode'}>
      <nav>
        <button onClick={toggleDarkMode}>
          {isDarkMode ? 'Light' : 'Dark'} Mode
        </button>
      </nav>

Depenedency Types for useEffect()

The useEffect hook in React accepts an optional second argument, which is an array of dependencies. The dependency array controls when the effect should run. There are three primary types of dependencies:

Empty Dependency Array ([]): When the dependency array is empty, as in useEffect(() => {...}, []), the effect runs only once, similar to componentDidMount in class components. It doesn't re-run when any props or state variables change. This is usually done to fetch data from API when the component mounts.
Specific Props or State Dependencies: You can specify one or more props or state variables in the dependency array, such as [players]. The effect will run whenever the values of those dependencies change. Here when 'players' state changes, it re-renders.

useEffect(() => {
  // ... (code)
}, [players]);

Callbacks as Dependencies: You can also include callback functions in the dependency array. The effect will run whenever those callbacks change, which can be useful for handling side effects based on callback changes.

useEffect(() => {
  // ... (code)
}, [someCallback]);

Above, we have described the use cases for useState() and useEffect(), what the differences between props and callbacks are, as well as to describe the three scenarios for dependency types for useEffect(). Hope you enjoyed the read and find this useful for tackling projects using useState, useEffect, props, and callbacks.

I know thee now, Callback Functions

Daniel — Tue, 19 Sep 2023 20:35:12 +0000

Our objective is to convert the above eventListener to use a callback function called handleDoubleClick and create a separate handleDoubleClick function.

My first attempt was this, but there are a few reasons why this does not work, which I will explain in this blog post.

1. Why does the above instance not work?

As an arrow function, the correct format would be:

image.addEventListener('dblclick', () => {handleDoubleClick()})

This would also work:

image.addEventListener('dblclick', (doubleClick) => handleDoubleClick())

Without the arrow function, the correct format would be:

image.addEventListener('dblclick', handleDoubleClick)

image.addEventListener('dblclick', (handleDoubleClick) => {handleDoubleClick()})

The statement above is incorrect, because I am overwriting the handleDoubleClick function, whereas if I had some other parameter inside the parenthesis, it is not being used so it is pretty much the same as having it blank, and therefore, just runs the handleDoubleClick().

To summarize:
Here I am creating a new arrow function that takes handleDoubleClick as a parameter. However, in our instance, the function handleDoubleClick is a function without parameters, so therefore, we can pass the function as a reference directly to the addEventListener like this:

2. Let's refactor this!

We are directly passing the handleDoubleClick function as the event handler for the 'dblclick' event on the 'image' element. In laymen's terms, when we double click the image, the handleDoubleClick function will take place.

If you were to have this below, you would be calling the handleDoubleClick function and passing its return value as the event handler.

image.addEventListener('dblclick', handleDoubleClick())

With the addEventListener we want to pass the handleDoubleClick function as an event handler without calling it immediately, which is why we pass the reference to the function.

image.addEventListener('dblclick', handleDoubleClick)

3. Define a parameter and callback function

A parameter is a placeholder and is/are the input values that the function uses to perform its operations. Parameters are passed to the function as ‘x’, where the function then produces a ‘y’ or output value usually by return or console.log().

A callback function is a function that is passed as an argument to another function, only after the completion of the function to which it is passed.

In the above example, when an image is double clicked, the handleDoubleClick function is called.

4. Other examples of callback functions

In this fetch example, each of the parts following the .then are each callback functions, aka the ((response) => response.json(), and the ((data)=> {...}

The console.log(a) is not correct syntax, however.

This is because we also want to put the console.log within a callback function. Therefore, the correct syntax would be:

function fetchImages() {
  fetch(apiUrl)
    .then(() => console.log(a))
    .then((response) => response.json())
    .then((data) => {
      // Rest of your code
    })
    .catch((error) => console.error('Error fetching images:', error));
}

Thank you for taking the time to read this and stay tuned for more blog posts for Javascript concepts!

Manipulating DOM events

Daniel — Mon, 04 Sep 2023 17:44:13 +0000

What is DOM manipulation? When we click 'send' on an iPhone message, when we click the 'like' button on Instagram, when we search things on Google. These are all examples of DOM manipulation. Basically, the basic fundamental actions that we as users interact with the webpage, almost instinctively.

Changing the DOM can be broken down to 4 different actions: 1. adding elements to the DOM, 2. updating element content (what the button will display) 3. Getting elements and 4. adding event listeners for click, submit, and more.

I will be using a forked replit from my FlatIron School Review Session: https://replit.com/@danieloh/demetrioChallengepracdtice#script.js

In this example, we are adding new beverages and displaying which beverage was added to the arraylist beverages.

1. Adding Elements to the DOM:

You can create new HTML elements using JavaScript and add them to the DOM. The createElement method is used to create a new element, and the appendChild or insertBefore method is used to add it to an existing element.

Example:

   **const newDiv = document.createElement('div');**
   newDiv.textContent = 'Newly added div';

   const parentElement = document.getElementById('parent');
   parentElement.appendChild(newDiv);

For the above example, createElement is used to add the "Add New Drink" button as well as the bold message at the bottom of the page.

2. Updating Element Content:

You can update the content of existing elements using the innerText, textContent or innerHTML properties.

http://tinyurl.com/innerText

The differences are subtle but the gist of the differences are:

textContents is all text contained by an element and all its children that are for formatting purposes only.
innerText returns all text contained by an element and all its child elements.
innerHtml returns all text, including html tags, that is contained by an element.

Example:

   const elementToUpdate = document.getElementById('content');
   **elementToUpdate.textContent = 'Updated content';**

Here we are basically inputting the content for textboxes for the counter message "There are currently 6 ..." and the messageH2 "A new beverage called taz was created..."

3. Grabbing Content from the DOM:

You can retrieve content from the DOM using various methods like getElementById, querySelector, and querySelectorAll. These methods return elements or collections of elements that match the specified selectors.

Example:

   **const singleElement = document.getElementById('myElement'); **
  ** const multipleElements = document.querySelectorAll('.myClass'); **

Also, of note here is that if it is an id, you use '#'. If you are using a class you can use the '.'. Be sure to understand which form is required for getting the correct element.

Here the querySelector for the "button" from the html allows us to then append it to #button-spot div id in the form and body of the html. This is basically connecting the user functions to the html tags, like a map router for events to the different parts of the webpage i.e. html.

4. Adding Event Listeners:

Event listeners allow you to respond to user interactions, such as clicks, inputs, or mouse movements. You can use methods like addEventListener to attach event listeners to DOM elements.

Example:

   const buttonElement = document.getElementById('myButton');
  ** buttonElement.addEventListener('click', function() {
       console.log('Button clicked!'); **
   });

This event listener allows us to add the "submit" action to the form, which will perform the addNewDrink method, and add the drink object with the user-inputed name of the drink.

To reiterate, manipulating DOM events includes 1. adding elements to the DOM, 2. updating the DOM element contents, 3. getting content from the DOM by using querySelector or getElemetBy..., 4. adding event listeners. By using these key tools, anyone can build a basic webpage.

Seeing several examples is really helpful, which can be found through searches on github. But these are just the starting blocks for building interactive DOM events, clicking buttons on a webpage, and displaying messages.