Forem: Kimberly Kohel-Hayes

GOING FROM LOCAL STATE TO A REDUX STORE IN A REACT APP

Kimberly Kohel-Hayes — Sun, 08 Aug 2021 20:25:03 +0000

When choosing between local state and a redux store there is one main factor you want to take into account: how many components need access to the state. Just one, use local state. More than one, you might want to use redux. What is redux? Well in this post I'm going to define the basic components of redux and thunk while explaining how to change from locally defined state to using a redux store.

In the following image I have a fetch set up as local state.

Redux is a JavaScript library that stores all of our data in a global state so that we can access it from across all components in our application.

In order to use Redux you need to run either

npx install redux npx install react-redux npx install thunk

yarn install redux yarn install react-redux yarn install thunk

in your terminal.

NOTE: The redux library is not exclusive to react - it can be used with other JS frameworks.

Next you need to set up your index.js file like this:

You are importing a provider, reducer, createStore, thunk and middleware. Then you are making a store with middleware using thunk and line 13 allows use of window's devtools. Lines 18 and 22 are wrapped around App which makes it so that redux is used for state. Our provider on line 18 is for connecting our react app to our redux store.

The redux store is an object that stores the global state in our app.

Next you want to make a redux folder in your src folder in which to store all of your redux files. Inside the redux folder you want to add an actions folder and a reducers folder and make a reducers file.

A reducer is just a function that returns state. I am using a combined reducer here. It turns out that redux lets us combine multiple reducers into one that can be passed into createStore by using a helper function named combineReducers. This way I can put more than one reducer in my blogReducer.js file.

Examining the file reducer/blogReducer.js will gain the information that the state is set to an empty array and there is something called an action.type and an action.payload. An action is a JavaScript object that can be an asynchronous function. Redux documentation states that 'you can think of an action as an event that describes something that happened in the application.' An action has a type and a payload. Action.type is a string and should be all caps. Action.payload will be other fields with additional information in them.

const add1Action = { type: 'ADD_ONE', payload: + 1 }

Due to the asynchronous nature of react, if your action is a function, then you need thunk. Thunk allows asynchronous functions to return a dispatch action in the form of a function (line 3 and 4 in above image). Otherwise it returns an action object.

If you follow the logic in the image below, first the componentDidMount() fires which you can see because of console.log('A'). Then fetchBlogs() fires which you can see because of console.log('B'). Then console.log('C') fires before console.log('D') does. This is because console.log('D') cannot fire until the 2nd promise is returned in the fetch.

In order to connect our components to the store, we need to import connect and use mapStateToProps and mapDispatchToProps. Destructuring is the process of breaking a structure. In the context of programming, the structures are the data structures, and destructuring these data structures means unpacking individual values from the data structure. On the left side, in BlogContainer.js, the connect statement has mapStateToProps and mapDispatchToProps destructured. They are in a longer format on the right side to show the other way they can be called.

I defined the major terms associated with redux and explained the basics about how to set up a redux store. Obviously the time when you want redux is in a significantly larger app than this, but this gives the basic idea. Good luck and happy coding.

Creating a Single Page React Application with a Rails Back-End

Kimberly Kohel-Hayes — Sun, 08 Aug 2021 19:49:52 +0000

Start by making a directory with a descriptive name for your application or website.

Type the following in your terminal to initialize your backend if you are using rails as an api. The ‘-T’ means no testing and the ‘—api’ changes it from a full rails application to an api.

Change directory into your backend. Do a git add and commit and open your editor. Open your gemfile and add cors and your serializer.

Go to config/initializers/cors.rb and uncomment lines 8 – 16. Change origins type to ‘*’. In your terminal do a git add and commit.

Change directory up one to your application directory. Type the following into your terminal to initialize your frontend.

The last thing you need to do is make two remote git repositories for your frontend and backend. Go to your git repository page and click ‘new’.

You don’t want to use a template. The name should be the same as the name of your frontend. If it is open source, make it public. Click ‘Create Repository’.

This is a directory with a git repository already created, so you want to use that option. Copy that code and go to your terminal. Paste it on the command line in your terminal and hit enter.

Repeat the previous two steps for your backend.

You are now ready to create a single page react app or website.

MAKING A CLASS LEVEL ACTIVERECORD CHAINABLE SCOPE METHOD

Kimberly Kohel-Hayes — Fri, 06 Aug 2021 15:05:54 +0000

This is how to make a class level ActiveRecord chainable scope method from what is a scope to implementation.

First, I had to find a good definition of scope method. I found one here. Ok. This definition brought up another thing that I don’t understand, lambdas, so let’s find a good article about those. This blog explains how to get from a method to a proc to a lambda. Great! Now we’re in business!

The next thing I’m going to do is look at my models for a validation that I can call either Model.order or Model.where on. For more information on these two ActiveRecord queries go here. Fortunately, I have a year table in my Car model that I can order either ascending or descending to get the oldest or the newest car in my database.

Now how do I use this and chain it?

In the example above, I used the scope in one of my views. I then used interpolation to call on Car.oldest_car in order to access the year, make, model, the path for the link_to, and another class for the owner name. These are the results of my scope methods...

Dropdown with Dynamic Array as Objects

Kimberly Kohel-Hayes — Wed, 05 May 2021 18:12:19 +0000

I just made a single page JavaScript application using a Rails Api for the backend. One of the things that I had to do in the process making this application was to make a dropdown that utilized the array holding my recipes. the dropdown needed to update a the array did. Here is how I did it.

First I made the html for the base part of the dropdown.

Then I made a static method in my Recipe class.

As usual I built the method in my console using a combination of debugger and console.log().

So first you put a debugger in the new method before you write anything. Refresh your index.html. Figure out how to access the <select></select> object. In this case, as you can see from the first image, I gave it an ID of id="dropdownButton1". So in the console I called document.getElementById("dropdownButton1") just to make sure it worked. It did so in my code I assigned it to the variable name sel.

I add each line of code above the debugger so that the code is tested as I go and the debugger moves down a line so I can figure out the next line in the console where I can test multiple things out.

I worked out the for loop in the console next. I needed to call the for loop on my array a variable number of times, so I used the .length method.

I wanted each element of the array inside of an option tag so next I created an element called "option" and assigned it a variable.

The following code is what I ended up with. The full code to my project is posted at the bottom. Thank you for reading my post.

https://github.com/kak79/js_project_frontend

https://github.com/kak79/js_project_backend

Creating A Personal Website with the Pure Framework

Kimberly Kohel-Hayes — Mon, 31 Aug 2020 15:00:48 +0000

Creating this website has been a road of trial and error for me. The last time I was actively creating websites Java Script was in its infancy. You only designed websites for laptops and desktops because that's all that they could be viewed on. What I remember of HTML has changed quite a bit and CSS and JS are pretty new to me. I researched grids, flexbox and frameworks exhaustively. I tried 3 different frameworks and my own grid before I settled on Pure.

Here is what the home page looked like originally:

I couldn't scroll down, the mobile looked terrible, but this one view was pretty good. If that was all I was looking for then I was fine, unfortunately, that was not the user experience that I was going for. So I gave up on writing my own grid.

Neither of the first two frameworks that I looked at gave me the flexibility that I was looking for, so I end up looking for small frameworks. That is how I found Pure. It's small, lightweight and easy to use. With it I was eventually able to create a mobile friendly site that utilizes a small amount of Java Script. I was able to combine two of their layouts to make my blog viewer friendly.

I learned a lot of CSS in this journey. I really like Pure, but I'd like to be able to design my own layout next time.

How to Make a New Program From the Terminal

Kimberly Kohel-Hayes — Fri, 14 Aug 2020 13:34:13 +0000

I'm a flatiron school bootcamp student. I've noticed that no one in the first and second modules seems to know how to start a new program from the terminal. So here we are.

Open your terminal and type the following in the directory of your choice:

mkdir new_folder
cd new_folder
bundle init 
touch config.ru

bundle init makes a new gem file and touch makes a file

At this point you can open your files in your IDE and edit as you usually would. Don't forget to run git init to create a new local repository and commit often!

Which Class? Puts it in?

Kimberly Kohel-Hayes — Tue, 21 Jul 2020 16:27:33 +0000

I just wrote a CLI (Command Line Interface) app. I do not say finished, because I'm still refactoring it. I have multiple classes in this app. The viewpoints on class responsibility vary. Specifically the interface class responsibility versus the methods class. Some say that you could put puts, inputs and gets methods in whichever class you could justify them.

Others say that they need to be in the CLI class so that if I ever change the project to a web project they will all need to be in the same class and not in the methods class for ease of access.

In my case we are dealing with class CLI and class Photographer. Most of my puts, inputs and gets are in class CLI, but having listened closely to everyone, I have decided that I need to do some refactoring of these methods in class Photographer in order to move the puts to class CLI.

First I am going to copy the two methods with the puts statements whole and paste them into the CLI class. Then I have to change a few things to make them a part of class CLI.

The first thing I do after moving pic_taker_array to CLI is change it from a class method to an instance method by removing the self.. I also need to change the way I call it in the CLI class from Photographer.pic_taker_array to pic_taker_array. Then I put a pry on the first line of this method so that I can see exactly how I need to modify it.

I have a method in my Photographer class called self.all that calls @@all so I'm going to try that in my pry.

I run the program and see that my photographers are no longer displayed properly.

I need to edit the display method so that so that it will accept a photographer into the methods pic_taker, pic_taker_url, and orig_url.

I try running my program again and realize that display is not getting called. This leads me to the line of the glue method where search_pic_taker_array is supposed to be called but is getting skipped, so I decide to take the contents of search_pic_taker_array and move them to glue.

I run my program and check everything. The photographers display perfectly now!

Selecting Hashes from an API

Kimberly Kohel-Hayes — Thu, 16 Jul 2020 18:17:45 +0000

Selecting hashes from an API can seem like a very complicated process, so let's take it one step at a time. We will be storing everything in variables for ease of access. The definition to a variable can be found here.
The first thing we are going to do is set our API equal to a variable named response. Then we are going to put in a pry (see more about pry here) and look at our available hash.

We want to select a key from response that has multiple keys as it's value. If we look closely, 'page'=>1,'per_page'=>1 so they each have individual returns and 'photos'=>[{ which means not only does it have an array, it has an array of hashes.
We are going to save 'photos' into the variable photos_array like this and run the pry again to select our next key.

We are going to pick three. 'photographer', 'photographer_url', and 'src'=>'original'
So using our binding.pry we gradually develop these three lines of code:

This code will work. But it isn't very DRY code. Don't Repeat Yourself! We are going to refactor this code next.
Because we want to iterate over three things we are going to use the .each method, naming our variable photographer_hash and setting up the block something like this:

Now we have a new Photographer object that iterates through my API and returns all of the values. But it could still be better. Instead of Photographer.new...., we are going to set up a new variable called info_hash. Set it equal to:

The reasons behind the locally defined keys pic_taker, pic_taker_url, and orig_url have more to do with OOP and classes than APIs and refactoring so will not be gone into here. Just understand that they were defined in another class. The last thing to do here is to put Photographer.new back in with its new argument of info_hash with the resulting API looking like this:

All of the code examples in this article and their associated files can be found here.

Creating a Custom RegEx

Kimberly Kohel-Hayes — Mon, 29 Jun 2020 16:57:47 +0000

Want to have a little programming fun? Let's create a RegEx! What is a RegEx? Well funny you should ask that! A RegEx or Regular Expression is a search string of condensed datum. Let's say you wanted to search for all capital letters in a given set of text. How would you go about it? A RegEx. This post will explore creating a RegEx for few different situations.
Before we start, three resources that will help anyone trying to build a RegEx are the following websites:
Regexr
Rubular
Ruby Docs Regexp
Lets walk through method

starts_with_a_vowel

and the steps I used to successfully find a working RegEx. We'll start by picking out a list of words. Find some that are capitalized and some that are not. Pick at least one, or more that starts with each vowel, capitalize some and leave some lower-case. Pick out a few words that start with consonants. Throw in some punctuation. Maybe some numbers. Now we have our list. Go to either Regexr or Rubular and enter your list in the text area. Make sure that you delete any sample text that was there already. In the RegEx area (which you might have to delete as well) you start entering possibilities. Play with it. Both sites give you plenty to go on. See if you can solve it differently than I did.
Now let's do something a little more complicated! Let's see if we can match all valid phone numbers but kick out all invalid phone numbers! You are really going to have to use your imagination and maybe do some research on this one! Here's what I came up with.
I hope you have some fun with this programming problem.