DEV Community: Aaron Minyard

How and When to Use Redux

Aaron Minyard — Mon, 04 May 2020 17:27:47 +0000

React is awesome. This is not necessarily an opinion shared by all developers, but it does away with many of the annoyances that we come across when writing vanilla JavaScript. One of the pillars of using React is state. Without going too far down the rabbit hole, state is essentially an object that contains the pieces of an application that can change.

For example, one might use state to show how many likes a particular post or photo received, or one might use state to keep track of the users currently logged in. As an application gets larger, it's quite possible you may have many things that are kept track of in state. This is where Redux comes into play. In a simple application where only a few things exist in state, there is a chance that utilizing Redux could be overkill.

When using React and Redux, it's important to understand the needs of the application you are building. If you only have 2 things to keep track of in state, you might be better off leaving Redux out of the equation. On the other hand, if you have 20 things to be kept in state, and especially if you'll need to access them in different files in your application, Redux might help you make sense of it.

Redux is a state manager, and if you're having trouble imagining how exactly state gets "managed", it gets put in one place, called the store, that can then be accessed throughout your whole application. Implementing Redux does add a bit of complexity to your application, but it may also help simplify it at the same time by keeping your entire state in one place.

The Redux docs themselves outline three principles that dictate its usage. The first is that in Redux, the global state of your application is stored in an object tree within a single store. Second, to specify how the state tree is transformed by actions, you write reducers. And finally, the only way to change the state is to emit an action, an object describing what happened. Let's unpack these three principles.

Creating the Store

The first step in using Redux is using the store. And to use it, we have to import it from redux like so:

import { createStore } from 'redux'

Then we will define a variable store. Unlike other variables where the name is up to the developer, the store must be named store. The next step is putting the function createStore to work. The way that this is done is fairly simple.

const store = createStore(students, ['Liz'])

In this very simple example, we are going to have a store for students, and I'll explain how we will go about adding a student to the store.

Using Reducers

Next up we need to build a reducer that will handle the action we need accomplished. For our purposes, the reducer will look like this:

function students(state = [], action) {
  switch(action.type)
    case 'ADD_STUDENT'
      return state.concat([action.text])
    default:
      return state
  }
}

As is the norm for reducers, we are utilizing a switch statement. The case gives us a description of what we're going to do(the action), and clearly, we are going to add a student by returning stat.concat([action.text]). The default action, return state, is there to be used when our store is left unchanged. So we have a reducer written to add a student to our array, and now we come to the last step, which is to dispatch our action.

Dispatching an Action

The next piece of the redux puzzle is to dispatch our actions. We do this by calling the dispatch method on our store. Our dispatch method will contain an object that contains our action type, as well as the name of the student we are going to add. We'll call the method like this:

store.dispatch({
  type: 'ADD_STUDENT',
  name: 'Jamie'
})

From here, if we check our state using store.getState(), we will see that Jamie has been added to our store.

console.log(store.getState())
// ['Liz', 'Jamie']

But what if a student graduates or moves away and we need to remove them from our store? We would simply add a 'REMOVE_STUDENT' action to our reducer, and then dispatch it.

function students(state = [], action) {
  switch(action.type)
    case 'ADD_STUDENT'
      return state.concat([action.text])

   case 'REMOVE_STUDENT'
      const students = state.students.filter(student => student.id !== action.id)
      return {
        ...state,
        students
      }

    default:
      return state
  }
}

Above we defined the variable students within our action, and then used the spread operator to leave the rest of our state unchanged. From there, we would dispatch as we did to 'ADD_STUDENT'.

We built the store, created a reducer to handle the actions we want done upon our store, and finally we dispatched those actions. I wanted this to be a simple example to explain what each piece of the puzzle accomplishes.

Here are some other great resources regarding how and when to use Redux:
When should I use Redux?
The Redux Toolkit
The Redux Style Guide
A Quick Start Tutorial which uses the Toolkit and hooks to demonstrate the "right way" to write Redux

I hope this helped clarify any questions you might have, and I hope you have fun working with React and Redux!

JSON Serializers in a Rails API

Aaron Minyard — Fri, 20 Mar 2020 19:57:25 +0000

This post is meant to serve as an introductory explanation piece on getting started using Rails as an API, and what a serializer is and what they do. If you're scratching your head at Rails as an API, click on and read the tagged link.

Before truly getting started talking about serializers, first let's talk about what JSON actually is. Simply stated, JSON is an abbreviation for JavaScript Object Notation. Taken directly from MDN, "JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and null. It is based upon JavaScript syntax but is distinct from it: some JavaScript is not JSON." It may be quite obvious after seeing what the abbreviation stands for, but JSON in its original format is just text, written using JavaScript (from here on, 'JS') object notation. In JS, a typical object can look like this:

const me = {
    name: "Aaron Minyard",
    age: 31,
    interests: ["programming", "cycling", "beer"]
}

This same object in true JSON format will look like this:

const me = {
    "name": "Aaron Minyard",
    "age": 31,
    "interests": ["programming", "cycling", "beer"]
}

Obviously, the only difference between the two is that the keys in a JSON object are strings. When using JSON data in standard JS, it is necessary to JSON.parse() your data back into standard JS. The inverse of JSON.parse() is JSON.stringify(). When sending data to whatever server your program is using, JSON.stringify() takes standard JS and "stringifies" it into JSON data.

You may be wondering what serializers are, what they actually accomplish, and why I haven't talked about them yet. Put simply, a serializer is a program that takes a chunk of data and renders said data into data that is easier for computers to read. For our purposes, we will only be talking about JSON.

But first things first. Starting with a new program, we will need to first set up Rails as an API. For our demonstratory application, we will build a (very) rudimentary application that shows beer reviews. If you'd like to code along, first create a new Rails API by typing the following in your terminal:

rails new beer_reviewer --api

From here we will use "rails generate resource" to build out our models, controllers, and migrations. After changing your terminal directory to beer_reviewer, enter each of these three commands into your terminal:

rails g resource beer name brewery style
rails g resource user name age:integer gender location
rails g resource review rating:integer beer:references user:references

In order to run your Rails server (as you will to view what the serializer is doing) you will need to do the following: make sure that you have the gem 'rack-cors' in your gem file, and then bundle install. After you have the gem installed, insert the following code into the config/application.rb file, inside class Application < Rails::Application:

config.middleware.insert_before 0, Rack::Cors do
  allow do
      origins '*'
      resource '*'
  end
end

Now it's time for the more interesting bits: Rails serializers.

From what I understand, Fast JSON is the fastest running serializer and is also quite easy to implement, so for the purposes of this post, we will stick to Fast JSON.

The first step for using Fast JSON is to put the gem 'fast_jsonapi' into your gemfile and then bundle install. Now that we have it installed, we need to generate serializers for each model. Accomplish this by going into your terminal and entering:

rails g serializer Beer
rails g serializer User
rails g serializer Review

After running "rails db:migrate" in your terminal, you will be able to run a rails server like normal, by typing "rails s" into terminal. Predictably, we will also need some seed data so that we can see what the serializer is actually doing. Provided below are 2 instances of each.

Beer.create(name: 'Clouds of Cashmere', brewery: 'Original Pattern', style: 'Hazy IPA')
Beer.create(name: 'Pacifico', brewery: 'Grupo Modelo', style: 'Pilsner')

User.create(name: 'Helen', age: 35, gender: 'female', location: 'San Francisco, CA')
User.create(name: 'Howie', age: 41, gender: 'male', location: 'Oakland, CA')

Review.create(rating: 10, beer_id: 1, user_id: 1)
Review.create(rating: 10, beer_id: 2, user_id: 2)

To see the wizardry provided by serializers, we will need to build out basic controllers as well. For the purpose of this post, all that's needed is an index method in each controller. These will look like this, inserted into each respective controller.

class BeersController < ApplicationController
    def index
        beers = Beer.all
        render json: BeerSerializer.new(beers)
    end
end

class ReviewsController < ApplicationController
    def index
        reviews = Review.all
        render json: ReviewSerializer.new(sightings)
    end
end

class UsersController < ApplicationController
    def index
        users = User.all
        render json: UserSerializer.new(users)
    end
end

Now we need to finish creating our serializers. Each serializer needs to have the attributes we would like to see specified. Say for users we only want to see name and age. Using Fast JSON we would code our serializers like this:

class UserSerializer
  include FastJsonapi::ObjectSerializer
  attributes :name, :age
end

If we then visit localhost:3000/users, we are given this data from the serializer:

{
  "data": [
    {
      "id": "1",
      "type": "user",
      "attributes": {
        "name": "Helen",
        "age": 35
      }
    },
    {
      "id": "2",
      "type": "user",
      "attributes": {
        "name": "Howie",
        "age": 41
      }
    }
  ]
}

If we were to write code to accomplish essentially the same thing without using Fast JSON, we would need to have bulkier methods in our controller, including an initialize method that takes in the data object to be serialized, as well as writing a method that takes in the data object and actually turns it into serialized JSON. While this might not seem terrible for a program like the one I've outlined, the benefits of using a gem that does the work for you are potentially huge. If our program were very large with a bunch of different models, this would save us a lot of time. Rather than writing however many separate methods, all we need to do is specify the attributes we want to see in each serializer and go from there.

Using Rails as an API paired with FastJson can help you write up your program very quickly and efficiently. For more reading on Rails as an API and FastJSon check out the resources below.

Rails API:

FastJSON/Serialization:

Visual Studio Code Shortcuts for Mac

Aaron Minyard — Thu, 05 Mar 2020 21:03:02 +0000

Hello and welcome back coders! This post continues the theme from my first post which covered command line shortcuts, but this time around I will cover helpful shortcuts and tips while using VS Code.

Autosave is your friend. If you're an all manual type of person, and would like to wear out the print on your command and s keys, go for it; but using autosave will save you time and undoubtedly keep you from trying to view changes that you "thought" you saved.

VS Code has some command line shortcuts that will come in handy. The first of these is 'code .'. Provided that you are in the appropriate/desired directory, typing in 'code .' will open up the entire current directory you are in.

The other command line shortcut that is very useful is 'code -r'. This shortcut opens your current directory in your most recently used VS Code window.

VS Code shares many common shortcuts with iOS. Among them: '⌘x' for cut, '⌘c' for copy, '⌘f' for find, '⌘w' to close your current window, '⌘n' to open a new file, '⌃⌘f' to toggle full screen, '⌘s' to save, and '⇧⌘s' to save as.

There are also a ton of shortcuts that are more specific to VS Code. One of my personal favorites, is '⇧⌥ + click'. If you need to edit multiple lines at the same time, this command will add your cursor in each place you click while holding down ⇧⌥. For example, say you made the same syntax error on 8 different lines, this shortcut will allow you to retype the correct thing only once.

Another favorite of mine is '⌘d'. While you have a word or item highlighted, using this command will go down the page and pick out every instance of the word or item you have written. Say you typed 'from' but meant to type 'form' 12 times. Rather than going through and highlighting/retyping the word 12 times, you can just hit 'd' while holding down '⌘' 12 times, and retype the word once.

For an even higher level of efficiency, use '⇧⌘l'. After highlighting one instance of a word on your page, this will highlight every occurrence of the word on the page.

To comment out only the current line you're typing on (or uncomment if it's currently commented) press '⌘/'.

If you'd like to go to the top of the page you're working on, press '⌘↑'. To go to the end of the page, press ⌘↓.

To highlight the entire line you are currently on, press '⌘l'.

To highlight a chunk of text on any number of lines beginning where your cursor is, use '⇧⌥ + drag mouse'. This is very helpful if you need to change larger blocks of code.

To indent the line you are on, regardless of where you are on that line, press '⌘]'. To outdent, press '⌘['.

If somehow you closed out of your tab, press '⇧⌘t' to reopen your closed tab.

To hide (or show if hidden) your sidebar, press '⌘b'.

Hopefully you all were able to glean a bit of useful knowledge from this post. While writing this I learned some new shortcuts that will undoubtedly prove themselves useful.
Becoming comfortable with shortcuts can certainly help you become a more efficient coder. Thanks for reading!

Beginners Tips for Working with the Command Line for Mac

Aaron Minyard — Thu, 13 Feb 2020 20:46:57 +0000

Hello readers and welcome to my first blog post! I recently began attending Flatiron School for Software Engineering in San Francisco. Within the first couple of days, it became clear to me that I needed to grow my skills working in the command line. This post is meant to serve as an introduction for those new to the command line, and provide examples of useful and necessary shortcuts.

For those that do not know, the command line (or CLI) is an alternative way to communicate with your computer using text commands through a terminal, rather than using a cursor with a mouse or trackpad. The typical way that people interact with a computer is using a cursor to accomplish whatever task, and this type of program is referred to as a graphical user interface, or GUI. The trade-off here is that we are often able to accomplish whatever task more quickly using the CLI.

As developers, being able to quickly and efficiently navigate the CLI is a very valuable skill, and is something that professional developers are expected to know very well. Because we use text commands (almost) exclusively in the command line, there are many different commands/shortcuts that we can leverage to make using the command line easier. This requires a bit of memorization and practice using the commands, but will eventually speed up your processes. First I will go over my most utilized standard commands to traverse through files/directories on a machine.

General CLI Commands

option + cursor click

If you have written out a longer command, holding down option and clicking your cursor on the character you'd like to move to will take you to that character. This is very useful for instances where you've made a small mistake or typo and need to make a small change.

[partial_command] + tab

If you're typing out a command that you've entered in your current terminal session, you can start typing the command and then press tab to complete it automatically. This is especially convenient for longer commands that you'd rather not waste time typing out again. For example, say you're trying to re-navigate to a directory with a long name you've since navigated a long way from with a name like 'exceptionally-long-directory-name-for-no-good-reason'. Typing in 'cd exc' + tab will automatically fill in the rest.

pwd

Pwd stands for 'print working directory' and no surprises here. It displays into your terminal what directory you are working in, revealing each directory all the way up to your Users folder.

cd [target_directory]

Using cd (abbreviation of 'change directory') will allow you to change the current directory you are in, as long as your target directory is accessible (either one behind, or one ahead) the target directory specified.

cd ../

Using cd ../ will take you back one directory in the file tree. For example, if you are in documents/photos, if you cd ../ from photos, you will leave the photos folder and return to the parent documents folder.

cd -

When using cd -, rather than going back a folder like cd ../, cd - will take you back to whatever folder you were in last.

cd ~

This command will take you to your home folder. In most cases this will be your individual user folder. For example if I run this on my machine it takes me to Users/aaronminyard.

open [filename]

This is an exceptionally obvious command. Typing in open followed by the filename specified will open the file using the program set to open up the file type by default.

↑

If you need to reenter a previous command, pushing up on an empty line in terminal will bring up the last command entered. If you need the command you ran multiple commands prior, you can find it by pressing ↑ multiple times.

File and Directory Creation

touch [new_filename_here]

Touch will create a new file in the directory you're currently in, with whatever name you specify.

mkdir [new_directory_name_here]

Mkdir will create a new directory inside whatever directory you are in.

mkdir -p [dir]/[dir]

This command is very similar to the standard mkdir command, but this will allow you to create a new nested directory.

Shortcuts to speed things up

ctrl + c

This command will kill whatever processes you are running, and brings up a new line for you to use.

cmd + k 
or
clear

Cmd + k will clear everything in your terminal window. Alternatively, you can type in and enter the word clear. Although why press six keys when you can press two?

ctrl + a

This will take you to the beginning of the line you are currently typing on. This is quite useful, especially if you've typed out something long but misspelled a word early on in the line.

ctrl + e

Ctrl + e is the functional opposite of ctrl + a. Rather than going to the beginning of the line you've already typed, ctrl + e will take you back to the last character on the line.

ctrl + u

Using Ctrl + U will delete everything on the line that you have typed so far.

Hopefully you learned something helpful from this post. While navigating the CLI can feel quite awkward at first, with a bit of practice you'll soon be flying through your terminal, accomplishing things quicker than you would with the traditional GUI interface.