DEV Community: CluelessTurtle

CRUD with Redux

CluelessTurtle — Thu, 30 Nov 2023 14:58:18 +0000

As react applications grow and become bigger apps the state and props that are shared between them become more and more harder to manage. Eventually, the state and props become a tangled mess. This can lead to unpredictable behaviors and bugs. That is where Redux comes in! Imagine taking all the props and states and storing them in one place where you can call upon whatever state you need in any component. In this blog, I am going to go over how to create, read, update, and delete (CRUD) state with redux.

Initial Setup

Before we start getting into creating state we first need to setup our react app with redux.

First, we create our React app and cd into it.

npx create-react-app my-app
cd my-app

Second, we need to install the Redux package and with it, we will also install Redux toolkit which will be useful for us later. We can do both by running the following command in the terminal.

npm install @reduxjs/toolkit

One of the perks of installing the Redux toolkit is there is a lot less setup we have to do. As I mentioned before we are going to be holding all our state in one place. This place is called the store and to the core, it is a simple javascript object.

Redux Store Setup

Thanks to our tool kit creating a store is a pretty simple process. first, we need to create a new javascript file in our source folder let's call it store.js.

Within our store.js we are going to need to import configureStore from our toolkit and create a variable to represent our store.

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

const store = configureStore({
    reducer: {

   }
})

export default store;

This store is looking good! Now the last step to setting up our store object is providing that state within it to our App component the best way to do that is in our index.js file. We do this by importing the Provider component from react-redux and wrapping it around our entire App like so.

import App from "./App"
import { Provider } from "react-redux"
import store from "./store"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}/>
      <App/>
  </Provider>
)

Awesome! Now with that, we have our store set up and ready to go! There isn't much in our store right now so let's change that.

Reducers

You may be wondering what that reducer key is in our store object. Well to put it simply a reducer is a function that takes in two arguments the current state and an action. With these arguments, it reduces them to one output which will be put into our store.

Let's start by creating our own reducer for puppies! So first we are going to create two folders one folder called features and inside that folder we have one called dogs. Within our dogs folder, we are going to create a javascript file called dogsSlice.js

In the dogsSlice.js file we are going to import createSlice from our tool kit to create our reducer. We are also going to equal it to a variable so we can export it to our store.

import { createSlice } from "@reduxjs/toolkit" 

const dogsSlice = createSlice({
     name: "dogs",
     initialState: {
         dogs: []    
     },
     reducers: {

     }
})

export default dogsSlice.reducer

Here we are importing createSlice from our tool kit to create our new reducer. We gave our reducer the name of dogs and setting its initial state to an object with a key called dogs that points to an empty array. After we set up our reducers which are currently blank because we haven't created any we then export all of it.

So now we can link our new reducer to our store like so.

import { configureStore } from "@reduxjs/toolkit"; 
import dogsReducer from "./features/dogs/dogsSlice"

const store = configureStore({
    reducer: {
       dogs: dogsReducer
   }
})

export default store;

BAM! We created our first reducer which will handle the state logic and our store which will handle storing all of our state. There is one more thing we are going to need to understand before we start creating our new state

Actions

We are so close to creating our new state but before we do we need to tell our reducers which one is going to run. What that means is that we are going to create a reducer for creating, reading, updating, and deleting our state so how does our dogsSlice know which one to run?

While creating our reducer I mentioned that they take two arguments the current state and an action. To be more specific the reducer actually takes the action.payload which it uses to maipulate the state. The action object actually looks like this.

const action = {type: "dog/add", payload: {}}

the action.type tells our dogsSlice which reducer to run and the payload is what we use to manipulate the state. That's great we just have one issue how are we going to populate the payload with state?

We are going to create a function that takes state as an argument and returns an action.

function dogAdded(newDog) {
   return {
      type: "dog/add",
      payload: newDog
   }
}

This function we created is called an action creator because it creates our action instead of us creating it manually. The most important part is that it takes state as an argument and sets it to payload.

The Redux tool kit already takes care of this for us. For example, let's say we want to create our dogAdded function we would write the following code at the bottom of our dogsSlice.

// this will auto generate our action creators
export const { dogAdded } = reviewsSlice.actions

Create

Finally! We can start talking about adding some state! Let's start by creating a function called you guessed it dogAdded that takes in two arguments state and an action.

import { createSlice } from "@reduxjs/toolkit" 

const dogsSlice = createSlice({
     name: "dogs",
     initialState: {
         dogs: []    
     },
     reducers: {
         dogAdded(state, action) {

         }
     }
})

export const { dogAdded } = reviewsSlice.actions

export default dogsSlice.reducer

Within the dogAdded function, we are going to push our action payload into the current state like so.

import { createSlice } from "@reduxjs/toolkit" 

const dogsSlice = createSlice({
     name: "dogs",
     initialState: {
         dogs: []    
     },
     reducers: {
         dogAdded(state, action) {
             state.dogs.push(action.payload)
         }
     }
})

export const { dogAdded } = reviewsSlice.actions

export default dogsSlice.reducer

Now I bet I know what everyone is thinking right now after seeing the code above. "why are you using push? isn't that a destructive array method? Like doesn't that mutate the original array?".

Yes, you are right the push() method does mutate the original array and is a very destructive method to use in javascript, however thanks to our toolkit. Under the hood redux toolkit uses a library called Immer to handle state updates. With this in place as long as we use createSlice Immer will make sure we are not actually mutating the state. Awesome! right?

Update and Delete

Since we got our redux ready to create new state let's setup a way for our state to be updated and deleted. Just like our other reducer we are going to start off by creating the action and a function to take state and an action

import { createSlice } from "@reduxjs/toolkit" 

const dogsSlice = createSlice({
     name: "dogs",
     initialState: {
         dogs: []    
     },
     reducers: {
         dogAdded(state, action) {
             state.dogs.push(action.payload)
         }
         dogUpdated(state, action){

         }
         dogRemoved(state, action){

         }
     }
})

export const { dogAdded, dogUpdated, dogRemoved } = reviewsSlice.actions

export default dogsSlice.reducer

As mentioned before we can use destructive array methods within our dogsSlice thanks to our redux toolkit. So for our update and delete reducers we are going to use the splice() method.

The splice method takes three arguments the first argument is where the deleting/updating is going to start. The second argument is how many things should be deleted/updated and the last argument is what we are going to replace it with.

The splice() method is perfect for our reducer however, we are still going to need to figure out what the index for the dog that we want to delete/update is. In other words we need to figure out where our splice() method is going to start.

We accomplish finding the index by using the findIndex() method. Assuming we are still getting the whole dog object through our action payload we can compare dog id's until we find our dog index!

Let's try it out!

import { createSlice } from "@reduxjs/toolkit" 

const dogsSlice = createSlice({
     name: "dogs",
     initialState: {
         dogs: []    
     },
     reducers: {
         dogAdded(state, action) {
             state.dogs.push(action.payload)
         }
         dogUpdated(state, action){
          const index = state.dogs.findIndex((dog) => {
               return dog.id === action.payload.id
          })

         }
         dogRemoved(state, action){
             const index = state.dogs.findIndex((dog) => {
                  return dog.id === action.payload.id
             })
         }
     }
})

export const { dogAdded, dogUpdated, dogRemoved } = reviewsSlice.actions

export default dogsSlice.reducer

Now with the index we can feed it into our splice method and with our update reducer we are going to give the whole dog object as the third argument. While our delete reducer we will leave the third argument blank.

import { createSlice } from "@reduxjs/toolkit" 

const dogsSlice = createSlice({
     name: "dogs",
     initialState: {
         dogs: []    
     },
     reducers: {
         dogAdded(state, action) {
             state.dogs.push(action.payload)
         }
         dogUpdated(state, action){
          const index = state.dogs.findIndex((dog) => {
               return dog.id === action.payload.id
          })
          state.dogs.splice(index, 1, action.payload)
         }
         dogRemoved(state, action){
             const index = state.dogs.findIndex((dog) => {
                  return dog.id === action.payload.id
             })
             state.dogs.splice(index, 1)
         }
     }
})

export const { dogAdded, dogUpdated, dogRemoved } = reviewsSlice.actions

export default dogsSlice.reducer

Now we have completed our reducers to handle creating, updating and deleting our state but wait how are we going to get our state into our components?

Reading state with useSelector

Assuming our state looks like this.

dogs: [
    {name: "Oreo", age: 5, breed: "Golden Retriever"},
    {name: "Joey", age: 7, breed: "Pitbull"},
    {name: "Yazzy", age: 2, breed: "Poodle"}
]

Also assuming our App component looks like this.

import React from "react"

function App () {

   return (
     <div>

     </div>
   )
}

export default App

We can easily read our state in our components using the useSelector hook that redux gives us. We just have to pass a callback function into it. This callback function will take state as an argument and return the state we want.

import React from "react"
import Puppy from "./Puppy
import { useSelector } from "react-redux"

function App () {

const dogs = useSelector((state) => state.dogs.dogs)

const dogsToDisplay = dogs.map((dog) => <Puppy dog={dog}/>)

   return (
     <div>
        {dogsToDisplay}
     </div>
   )
}

export default App

We gain access to all our state through the useSelector hook which we can import into any of our components. We then can select which state we need by first specifying the root state, then the name of the reducer, and then the name of the state within the reducer.

This is great! Now we have full access to our state whenever and wherever we need it! There is just one problem how will we tell our components to actually use our reducers?

useDispatch

As the title implies we are going to do this by using the useDispatch() hook. Recall when we were talking about our action creator functions since redux toolkit takes care of making those for us all we are going to have to do is feed the useDispatch hook the action creator and the action payload.

assuming we have a controlled form for creating dogs like so.

import React from "react"
import Puppy from "./Puppy
import { useDispatch } from "react-redux"

function dogForm () {

const dispatch = useDispatch()
const [name, setName] = useState("")
const [age, setAge] = useState(0)
const [breed, setBreed] = useState("")

function handleSubmit(e){
  e.preventDefault()

    const objToBeSent = {
    name: name,
    age: age,
    breed: breed
  }

  dispatch(dogAdded(objToBeSent))
}

   return (
     <div>
        <form onSubmit={handleSubmit}>
           <label> Name: </label>
           <input onChange={(e) => setName(e.target.value)} value= 
           {name}/>
           <label> Age: </label>
           <input onChange={(e) => setAge(e.target.value)} value= 
           {age}/>
           <label> Breed: </label>
           <input onChange={(e) => setBreed(e.target.value)} 
           value={breed}/>
           <button type="submit"> Submit </button>
        </form>
     </div>
   )
}

export default App

Here we have a controlled form which upon submission of the form we use the dispatch hook and feed it the action creator function and the action payload. This code then goes to our create reducer to add the new dog to our state.

BOOOOMMMM this is so awesome we are now using redux to Create, Read, Update, and Delete our state.

Conclusion

By putting all our state into the redux store we have effectively and efficiently managed out our state. Goodbye prop drilling and goodbye messy state within our components

Active Record Serializer

CluelessTurtle — Fri, 27 Oct 2023 16:05:14 +0000

Databases and the data they have are very important for many successful web applications. One of the tasks a database has to handle is the distribution of data. This is very important because if a database sends to much data it can be very hard for any frontend framework to handle and manage it. In rails we handle the distribution of data with the ActiveModel::Serializer gem.

What is the Active Model Serializer gem?

To fully understand what the active model serializer gem is we first need to understand what a gem is. To put it simply a gem is an open source library that contains ruby code that is packaged together and once installed allows the programmer to utilize the code within it. This is great because it allows us to use pre-built code to help avoid doing repetitive tasks so we can focus our attention on the cool stuff.

So this brings us back to our original question what is the active model serializer gem? Simply put this gem helps to serialize our JSON data however we want. To serialize data means to pick which attributes and relationships we will be rendering on our API (Application Programming Interface) in other words customizing the data we return to our frontend. It is also worth mentioning that this gem does follow convention over configuration meaning that while using this gem there isn't much coding required on your part However, it is still important to understand what each method is doing since it won't be broken down for you.

How To Install

Installing this gem is very easy! The first thing we need to do is first add it to our gem file.

# Gemfile
gem 'active_model_serializers'

Now we run bundle install to activate our gem and BOOM! we are ready to go!

How to use Active Model Serializer

The best way to understand how to use this gem is through example. So for this example let's say that we have a schema that looks like this

ActiveRecord::Schema.define(version: 2023_09_09_183405) do

  create_table "cars", force: :cascade do |t|
    t.integer "year"
    t.string "make"
    t.string "model"
    t.string "image"
    t.string "color"
    t.string "body_type"
    t.string "engine_size"
    t.string "drive_train"
    t.string "created_by"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end
end

Wow that is alot of info on one car. So let's say all our frontend only needs to map through only the year, make, and model normally without a serializer we would have to let our car controller know what JSON to return like so.

class CarsController < ApplicationController
  def index
     cars = Car.all
     render json: cars.to_json(only: [:year, :make, :model]), 
     status: :ok
  end
end

Well not to be rude but I think it's safe to say that to any developer this looks like an eyesore. The reason is that this can be very error-prone very quickly and on top of that it violates the separation of concerns. The controllers job is to interact with the model get whatever JSON data is requested and then pass that along to our frontend to present it to the user. It is not the controllers job to determine how the data should be returned rather this should be handled in our serializer.

With our serializer we first need to create a folder called Serializer and in that folder open a new ruby file we can do this through using the built-in serializer generator. Simply jumping into our console and running the following command will do the work for us.

rails g serializer car

Now we can take a look at what the generated file looks like. It should look something like this.

# app/serializers/car_serializer.rb
class CarSerializer < ActiveModel::Serializer
  attributes :id
end

Now if we visit our localhost:3000/cars we will see all the Ids of our cars in other words we can control what json we want to render by simply adding the attributes into our serializer. In our case lets get rid of the :id attribute and just add the year, make, and model of the cars.

# app/serializers/car_serializer.rb
class CarSerializer < ActiveModel::Serializer
  attributes :year, :make, :model
end

Now if we visit localhost:3000/cars we will see the following

[
  {
    "year": 2015,
    "make": "Toyota",
    "model": "Corolla"
  }
]

BOOM! With that, we just greatly reduced the JSON we are sending to the frontend while also maintaining separation of concerns now we can return our controller to it's original state like so.

class CarsController < ApplicationController
  def index
     cars = Car.all
     render json: cars, status: :ok
  end
end

Now this looks super cleaned up! Under the hood whenever we use render json: rails will follow the naming conventions and implicitly look for a serializer that matches the name of the model. This is all thanks to rails being a convention over configuration framework and active model serializer complementing this.

This is amazing and all but let's say we want to take this a step further and customize the JSON data even more. We can do this through custom serializer methods!

Custom Methods

Let's say we want to put the year, make, and model in a string and tell the user the engine size the car has

[
  "car_summary": "2015 Toyota Corolla - Engine Size 1.5 liter
]

To do this we are going to have to create a custom method. To start we are going to have to define and add our custom method to our attributes. While we are at it we are going to drop a byebug in the method as well

 # app/serializers/car_serializer.rb
class CarSerializer < ActiveModel::Serializer
  attributes :car_summary

  def car_summary
    byebug
  end
end

So you may be wondering how am I going to get access to the year, make, model, and engine size within this method? Well if we jump into the byebug and type self the instance that is returned includes an object attribute which also has the first car instance. This means that you can use self.object and whatever attribute you want to access. Let's try making the JSON we want to return with string interpolation.

 # app/serializers/car_serializer.rb
class CarSerializer < ActiveModel::Serializer
  attributes :car_summary

  def car_summary
    "#{self.object.year} #{self.object.make} #{self.object.model} - Engine Size #{self.object.engine_size} liter"
  end
end

Now we will get the following JSON.

[
  "car_summary": "2015 Toyota Corolla - Engine Size 1.5 liter"
]

Conclussion

Managing the JSON an API returns and how it is returned is very important. This causes less stress for our APIs and less work for the frontend which in turn makes everything more responsive. Active Model Serializer gem makes this possible and is very easy to understand.

Active Record Under the Hood

CluelessTurtle — Thu, 15 Jun 2023 20:23:26 +0000

Active record is an awesome tool and helps with multiple parts of your backend. For example active record gives access to many useful methods for your models and is an ORM (Object-Relational Mapper). ORM is a technique for accessing a relational database with an object oriantated language. In this blog we are going to be focusing on the many amazing methods active record provides us. As well as recreate these methods to demostrate what active record is doing under the hood.

What Exactly is Active Record?

What is active record? to put it simply active record is a ruby gem that is an entire library of code. It allows us to focus on making exciting things instead of doing repetative tasks. Active record is simply installed by running gem install active record or including it in your gem file.

What is an ORM?

What is an ORM? Like mentioned before ORM is a technique for accessing a releational database with an object oriantated language. What does this mean for us? to put it simply we use ruby programs to manage database data by "mapping" database tables to ruby classes and instances of those classes to rows in tables. Without active record we will have to be creating our own custom ORM's.

Establishing Database Connection

First step we need to do is establish a connection for our database we can do this with the following code in our enviroment file.

require 'bundler'
Bundler.require

require_relative '../lib/dog'

DB = { conn: SQLite3::Database.new("db/dogs.db") }

With active record it would look like this.

ActiveRecord::Base.establish_connection(
  adapter: "sqlite3",
  database: "db/artists.sqlite"
)

Creating Tables

Now that our database connection is established next we need to create our tables first before we start mapping through them. Let's say we want to create a table for dogs and in the table we want coloumns of name and breed. Consider the following code.

class Dog

  def self.create_table
    sql =  <<-SQL
      CREATE TABLE IF NOT EXISTS dogs (
        id INTEGER PRIMARY KEY,
        name TEXT,
        breed TEXT
      )
      SQL
    DB[:conn].execute(sql)
  end
end

Let's break this down. Within our Dog class we are defining a class method called self.create_table and in that method we write the following SQL code for creating our table then use DB[:conn].execute(sql) to execute the SQL to create this table in our database.

In active record we would do the same thing just with a bit of a twist.

sql = <<-SQL
  CREATE TABLE IF NOT EXISTS dogs (
    id INTEGER PRIMARY KEY,
    name TEXT,
    breed TEXT
  )
SQL
ActiveRecord::Base.connection.execute(sql)

Instead of using DB[:conn].execute(sql) we use ActiveRecord::Base.connection.execute(sql).

Class Methods

As shown before we need to create classes and methods to create our tables. However, How will our classes know the names of the columns in our database? Sure it knows the databases name becuase of the class name but without it knowing it's columns name there isn't much we could do with the table. We fix this by making attr_accessors that match the column names and initializing it. Now our class would look like this.

class Dog

  attr_accessor :name, :breed, :id

  def initialize(name:, breed:, id: nil)
    @id = id
    @name = name
    @breed = breed
  end

  def self.create_table
    sql =  <<-SQL
      CREATE TABLE IF NOT EXISTS dogs (
        id INTEGER PRIMARY KEY,
        name TEXT,
        breed TEXT
      )
      SQL
    DB[:conn].execute(sql)
  end
end

Here we are "mapping" our class to a database table by having the class name match the table name and having it pluralized. We also have the column names match the attr_accessors of our class.

We then would have to continue to write out methods with SQL imbedded in them to manipulate our dog table. Let's start with our basic CRUD (Create, Read, Update, Delete) actions.

Create Method

While creating our initialize method did you notice something? let's take another look.

 def initialize(name:, breed:, id: nil)
    @id = id
    @name = name
    @breed = breed
  end

Why is the id instance initialized as nil? Well when you put new data into our database it will automatically give it an id. What this means is we want our database to give our class an id not the other way around becuase this will keep the id number same across the board.

While keeping that in mind we can move onto creating our method. We are going to need to accomplish two main things which is creating a new dog instance in our class and saving it into our database. We already have a way to save a dog instance by using the .new method so we have one step done we are just going to have to save this new instance to the database.

Save Method

So how do we start creating this save method? First we are going to have to define the method and create the SQL for inserting our new dog like so.

def save
   sql = <<-SQL
         INSERT INTO dogs (name, breed)
         VALUES (?, ?)
         SQL

Great! Here we are writting SQL to insert the name and breed of our new dog into our database. However, we arn't near done yet we still need to fill those dynamic parameters with the values we initialized and execute the SQL just like how we executed the SQL when creating our table

def save
   sql = <<-SQL
        INSERT INTO dogs (name, breed)
        VALUES (?, ?)
        SQL

    DB[:conn].execute(sql, self.name, self.breed)

Here we executed the SQL and us the self keyword to get our values into that SQL. We are almost there! All we need now is the new id value from our database.

We will do this by creating a new SQL query to grab our last inserted row and equal this to our id. When grabbing the last inserted row it will get us a heavly nested array which we will then do [0][0] to get just the id value. So just to recap our whole save method would look like this.

def save
   # creating SQL to insert values into our database
   sql = <<-SQL
        INSERT INTO dogs (name, breed)
        VALUES (?, ?)
        SQL
    # filling in those values in our SQL query and executing it
    DB[:conn].execute(sql, self.name, self.breed)

    # getting the id from the database and equating it to our Id
    self.id = DB[:conn].execute("SELECT last_insert_rowid() FROM 
    dogs")[0][0]

    # returning the ruby instance
    self
 end

We did it! we created our save method! With this method we can now persist new data to our database! Wheeeewwww that was alot of work for one method and sadly this does leave alot to be desired. For example everytime we create a new ruby instance we have to call the save method everytime.

Oreo = Dog.new(name: "Oreo", breed: "French Bulldog")
# => #<Dog:0x00007fdg33935128 @name="Oreo", @id=nil, @breed="French Bulldog">

Oreo.save
# => []

Hiedi = Dog.new(name: "Hiedi", breed: "Golden Retriever")
# => #<Dog:0x00007fdg135c6200 @name="Hiedi", @id=nil, @breed="Golden Retriever">

Hiedi.save
# => []

This can be very repetative and honestly exhausting so how can we do both create a new ruby instance and persist the changes to the database?

Create Method

The good news is we did most of the work already. Reason being is we are going to reuse the save method we made. So lets start by creating a method that creates a new dog instance and returns it to a variable

def self.create(name:, breed:)
   dog = Dog.new(name: name, breed: breed)
end

Now all we have to do is save that new instance reusing our save method.

 def self.create(name:, breed:)
    dog = Dog.new(name: name, breed: breed)
    dog.save
  end

With this method now we can do the folllowing.

Dog.create(name: "Fido", breed: "Husky")
# => #<Dog:0x00006b2f579ae6d8 @name="Fido", @id=1, @breed="Husky">

Ta-Da! With this method now we create a new instance and persist it to the database all with one line!

Read Method

There are many read methods that we can code out but for all those methods we are going to have to take the response from the database and make it into a ruby object.

New From Database Method

Depending on the database we can get different responses in this example we are using SQLite. With SQLite we will get an array of data similiar to a row in our database it would look something like this [1, "Fido", "Husky"]. Knowing that all we really have to do is create a method that takes this array and assigns it's values to a ruby instance. It would look something like this.

def self.new_from_db(row)
   self.new(id: row[0], name: row[1], breed: row[2])
end

Cool! Now all we need is to get that response from the database.

Find By Name Method

As the title suggests we are going to create a method that finds a dog by name. You probably already guessed by now where we need to start which is creating the SQL query.

def self.find_by_name(name)
  sql = <<-SQL
     SELECT * FROM dogs
     WHERE name = ? LIMIT 1
    SQL
end

That looks perfect! Now we need to tell the database to execute this SQL and map it into our new_from_db method.

def self.find_by_name(name)
  sql = <<-SQL
     SELECT * FROM dogs
     WHERE name = ? LIMIT 1
    SQL

  DB[:conn].execute(sql, name).map do |row|
     self.new_from_db(row)
  end.first
end

Nice! Here we are making the SQL query to search for a dog by name then executing that query and maping through the results. We then call our new_from_db method to create the new ruby instance and finally ending it after the first result with our #first method. BAM! we created our find_by_name method! Let's try using it.

Dog.find_by_name("Fido")
# => #<Dog:0x00007f7f632ae6c8 @name="Fido", @id=1, @breed="Husky">

Update Method

For our update method we are going to have to write SQL using the UPDATE keyword. The UPDATE keyword needs to be followed with the SET keyword which sets the new values and the WHERE keyword to make sure we have the right dog. The SQL would look like this.

def update
   sql = <<-SQL
   UPDATE dogs
   SET 
      name = ?,
      breed = ?
   WHERE id = ?
   SQL
end

Awesome! This SQL statment does most of the work for us now all we have to do is execute the SQL and fill in the parameters. We do this by using the self keyword.

def update 
        sql = <<-SQL
        UPDATE dogs
        SET 
            name = ?, 
            breed = ?
        WHERE id = ?
        SQL

        DB[:conn].execute(sql, self.name, self.breed, self.id)
    end

BOOOMMMM! We got our update method! So lets give this method a test drive.

buddy = Dog.create(name: "Buddy", breed: "BullDog")
# => #<Dog:0x00006b3f269ae8d3 @name="Buddy", @id=3, @breed="BullDog">

buddy.name = "Sir Buddy"
# => #<Dog:0x00006b2f439ae9d2 @name="Sir Buddy", @id=3, @breed="BullDog">

buddy.update
# => []

This works perfect!

Delete Method

So with this method we have to write in our SQL the keyword DELETE FROM followed by the table name. After that we use the WHERE keyword to make sure we delete the right dog from the database. So it would look something like this.

def delete
    sql = <<-SQL
       DELETE FROM dogs
       WHERE id = ?
    SQL
end

Now all we got to do is execute the sql and give it the id name

def delete
    sql = <<-SQL
       DELETE FROM dogs
       WHERE id = ?
    SQL

DB[:conn].execute(sql, self.id)
end

Nice with that we have our delete method all coded out!

Active Record

All the methods we have defined above is active record under the hood, granted active record has more methods than just CRUD methods but you get the gist. So the question comes to mind how would active record give our Dog class the methods it needs? Well like mentioned before active record is a library of code with already created methods so all we really have to do is the following in our class

class Dog < ActiveRecord::Base
end

Now we get access to all the methods we created earlier by using active record base class and having our Dog class inherit from it and that is it! no need for further coding! All that time we used for coding out all those methods are now done! Amazing right? Now we can focus less on remedial tasks and more on the exciting stuff.

Conclusion

Active record gives us the power to perform many useful methods without having to write any code for said methods. This gives us programmers our time back and allows us to focus on other things our applications are going to need.

How To Use The State React Hook

CluelessTurtle — Thu, 19 Jan 2023 16:32:51 +0000

Why use state?

One of the coolest things to see as a software developer is your web app being interactive with your users. This is the main reason why I love using state in my code. It updates and changes your web app in real time and gives your website that liveliness that users will appreciate. Best of all, once you get a good grasp on how state works it is not at all complicated to impletment into your code.

What exactly is state?

State is data that is dynamic.This means that when the user interactes with your app the data is changing and updating during the components life. When state changes it re-renders the component with new data which then is either displayed on the DOM or held.

How do you use state?

Using state is simple and only requires three steps.

Import State
Initilize State
Use State in our component
Setting and updating State

Importing State

Within each component we have to import state. We only need to do this once per component. For example, we have a component that has a button and when the user clicks that button the user either logs in or out.

import React from "react";

function App() {

  function handleClick() {
   console.log("I was clicked!")
 }

  return (
   <div>
   <button onClick={handleClick}> Log In! </button>
   <div>
 }

In the code above all we have is a button logs on the console "I was clicked!". In this example, it does not change the text inside the button at all leaving the user confused. The first step to tackling this problem is importing the useState hook.

import React, { useState } from "react";

This is how we tell the code to react and create a new state for us to work with. Next we are going to have to initalize state and provide it a starting value.

Initilize State

Now that react knows we want to create a state in this component. We have to initilize the start. In other words we have to give it a name and an initial value.

function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
}

In the code above we are constructing two variables from state which are isLoggedIn and setIsLoggedIn. isLoggedIn is a reference to the current state in our component in our case the boolean value false. The setIsLoggedIn is a function that we can use to update the state at any point in our component. Lastly we equal everything to useState to tell react where we are conctructing these variables from and put in between the parenthesis the starting value of our state.

Using State in our component.

Now we have our state created and initalized. Let's impliment this state into our component and talk about what we want to do in this component.

when the user comes to the website they are logged out and button text says log in
upon clicking the button the users log in
while user is logged in the button says log out
upon clicking the button again the user logs out

The idea here is while the state is false the user is logged out and while the state is true the user is logged in. The best way to go about this is through conditional rendering in our JSX.

import React, { useState } from "react";

function App() {

  const [isLoggedIn, setIsLoggedIn] = useState(false)

  function handleClick() {
   console.log("I was clicked!")
 }

  return (
   <div>
   <button onClick={handleClick}> {isLoggedIn ? "Log Out" : "Log In"} 
   </button>
   <div>
 }

Through the conditional operator when isLoggedIn is True the buttons text will display log out and when it is false it will display log in. So far so good we have one more step to go through before we are done with this component.

Setting and Updating State

So with what we have so far the user still does not see the change in the text of the button instead all that happens is "I was clicked" gets console logged. We still also have to figure out how we are going to set state to its opposite. Lucky for us there is an operator for this.

import React, { useState } from "react";

function App() {

  const [isLoggedIn, setIsLoggedIn] = useState(false)

  function handleClick() {
   setIsLoggedIn((isLoggedIn) => !isLoggedIn)
 }

  return (
   <div>
   <button onClick={handleClick}> {isLoggedIn ? "Log Out" : "Log In"} 
   </button>
   <div>
 }

In our handleClick callback function we use setIsLoggedIn function to update our state. Remember that whenever we change our state it re-renders the whole component. In this case, now our conditional operator in the jsx will be re-rendered to show the current logged state of our user. Inside the setIsLoggedIn function we have a callback function that takes the current state in our component and we use the bang(!) operator to switch the state to its opposite boolean value. There we go, we just made a working log in button with state

Conclusion

The useState hook is a very powerful tool in react that every developer should have handy. Think about the endless possibilities that as developers this gives us! Not to mention this also makes our apps more interactive with the users which is an important goal.

Understanding JavaScript Methods like Map(),Reduce(),Find(), and Filter()

CluelessTurtle — Mon, 14 Nov 2022 21:06:22 +0000

When learning how to code, you often come across particularly confusing methods. The idea of implementing/understanding callback functions is already daunting enough. However, now we have to implement those functions with difficult methods. The good news is that as a developer you have already taken the right steps to better understand how to implement these methods.

What is a callback function?

Before we get into these methods we first have to understand what a call back function is first. The formal defintion of a callback function is.

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

To summarize a callback function is a function that used as an argument inside another function. it will eventually be invoked (used) when the outer function is invoked.

Here is an example of a callback function being used

function callBackFunction(){
   const sayHi = console.log("Hello! I am a callback function!")
   return sayHi
}
function mainFunction(callBackFunction){
    console.log("Hello! I am the main function.")
    callBackFunction()
}
mainFunction(callBackFunction)

Here we created two functions mainFunction and callBackFunction. In our cute callback function we created a variable called sayHi which console logs the following message. the important thing to understand is that the callback function is not being invoked (used) just yet. The mainFunction on the first line console logs another message then on the second line of code it invokes the callBackFunction inside itself. In addition the mainFunction is not invoked yet either once we reach the last line of code in which we invoke both functions.

Understanding .Map()

Now that we have a better understanding of callback functions we can start getting into these methods. The first method and the most used is the .Map() method. This method takes an array/object of elements and transforms each of them through a callback function of your choice. Then it takes those transformed elements and puts them into a new array. This is the formal definition.

The .Map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Let's break this further down. For example we have an array of elements.

const arrayOfElements = [1, 2, 3, 4]

For this example, we are trying to multiply all these elements by 2 However, I also want to leave original array alone in case I need to refer back to it later. This is when the .map() method comes in play.

First let's make a function that takes in an argument and mulitplies it by 2.

function multiply(x){
return x * 2
}

Great! Now remember I do not want to change the original array so I am going to create a new array and equal it to the original array. Then we are going to attach our .map() method to the original array

const newArray = arrayOfElements.map()
console.log(newArray)

This is good so far but we are still missing our callback function. The .map() method right now is taking every individual number in the orginal array but isnt doing anything with the numbers. Let's use the multiply function we created earlier as our callback function to tell the .map() method to multiply every number by two. With everything together it should look like this.

const arrayOfElements = [1, 2, 3, 4]

function multiply(x){
return x * 2
}

const newArray = arrayOfElements.map(multiply)
console.log(newArray)
// expected Output: newArray [2, 4, 6, 8]

Understanding .Reduce()

The .reduce() method in simple terms attaches to an array of elements then goes through every individual element in that array. Then passes them through a callback function. During the first iteration the method takes that caculation performed in the callback function and saves it so during the next iteration it can be used. After passing every individual element into a callback function it then takes that new single element and saves it to a variable. This is the formal definition bellow.

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no "return value of the previous calculation". If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

Let's break this down. Let's say we have an array of numbers.

const arrayOfNumbers = [1, 4, 6, 8, 12]

I want to know the total of these numbers. That's when our reduce method comes in! Let's create a new variable and equal it to this array of numbers and attach the reduce method to it.

const arrayOfNumbers = [1, 4, 6, 8, 12]

const newArray = arrayOfNumbers.reduce()

Nice! so now we just need to give the reduce method arguments.
Right now the reduce method is taking every individual number in the array of numbers but isn't doing anything with them. With that in mind we are going to create a callback function so that the reduce method can do something with those numbers and for the second argument it is going to be our initial value(our starting point) but for now lets start it at zero.

 const arrayOfNumbers = [1, 4, 6, 8, 12]

 const newArray = arrayOfNumbers.reduce(addTogether,0)

Now the only thing we need to do now is create the callback function. In this callback function it is going to need to take two arguments. The current number we are looping through in the array and the previous number from the previous caculation.

function addTogether(currentNumber, previousNumber){
return currentNumber + previousNumber
}

During the first iteration the reduce method takes the first number which is 1 and passes it through the callback addTogether. In our callback function it takes that 1 and adds it to the intialized value we stated earlier which is 0 then returns that number 1 while also saving it to our currentNumber variable. Upon the second iteration reduce takes the second number which is 4 and passes it through our addTogether function. In that function it takes the saved number which is 1 and adds the current number which is 4 returning 5 while saving it. All together it should look like this

 const arrayOfNumbers = [1, 4, 6, 8, 12]

 const newArray = arrayOfNumbers.reduce(addTogether,0)

 function addTogether(currentNumber, previousNumber){
  return currentNumber + previousNumber
}

console.log(newArray)
// Expected Output: 31

Understanding .Filter() and .Find()

These last two methods are very similar in the fact that both of these methods take array/objects and take only the elements that meet the condition we setup in a callback function to then push those elements in a new array. Here is the formal definition for both.

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

The main difference between the two is when .find() gets an element that meets a condition it only returns that one element. While .filter() keeps looking for other matches throughout the other elements.

Let's start with the .filter() method let's say I have this array of elements.

const originalArray = [apple, cherries, orange, banana]

In this example, we only need the fruits in which have a minimum word length of 5 characters. So let's start by creating our new variable that we want the array to be stored in and while we are doing that we can also attach the .filter() method to the original array.

const originalArray = [apple, cherries, orange, banana]

const newArray = originalArray.filter()

Now we need to give our filter a callback function argument in which it can use to filter out the elements we do not want. In which case let's create a function called filterByLength to create that condition

function filterByLength(individualFruit){
return individualFruit.length > 5
}

Awsome! With our callback function lets pass that into our .filter() and put it all together.

const originalArray = [apple, cherries, orange, banana]

const newArray = originalArray.filter(filterByLength)

function filterByLength(individualFruit){
return individualFruit.length > 5
}
console.log(newArray)
//expected output: newArray [cherries, orange, banana]

Now that we have a good understanding of .filter() method the .find() method will be alot easier to understand. As mentioned earlier the only diffrence between these two methods is that the .find() method only returns the first element that meets the condition

Going back to the example let's say we replace .filter() with .find() we would only get back cherries and it would something like this

const originalArray = [apple, cherries, orange, banana]

const newArray = originalArray.find(filterByLength)

function filterByLength(individualFruit){
return individualFruit.length > 5
}
console.log(newArray)
//expected output: newArray [cherries]

.find() stops at the first element that passes the condition in the callback.

Conclusion

As developers we will always come across code we do not fully understand. That is why it is important to look up and refer back to the documentation when needed. These methods are going to be used in our every day lives so it's important to get a good understanding of them becasue they are here to help you not scare you.