DEV Community: Tinkerjoe-Git

React Redux : a quick 'under the hood'

Tinkerjoe-Git — Sun, 11 Jul 2021 06:47:56 +0000

What is Redux?

Redux is a popular JavaScript library for managing the state of your application. Something like 60% of React applications use Redux, so you may have heard of it at least. Redux puts all of our projects state in one place. This is the primary use case with Redux, the problem it solves is making the passing of data and state a lot less of a headache - for example if we have a parent component from which it has two child components - these components want to use and share the same sate. Generally speaking this can be solved by lifting up - so you lift state from the 2nd child component to the App.js file, then once its at that top level you can use state in the 3'rd component in this situation. This uni-directional flow gets problematic when we're working with far more large and complex applications in which many states needed to be used in many different components.

something called the Store manages all of our states with Redux, so the component is only focused on dispatching the changes in state to the store, the store is an excellent example of "Single Source of Truth", it takes a lot of abstraction away from the idea of where state changes go to be stored. Interestingly Redux has this immutability quality - which is a fancy way of saying we don't change the state object and its props per-se, rather Redux makes a new object, calculating the new application state and updates it with the newly created object. You may wonder why it goes through all this trouble, its important to note that your previous states are valuable information, if you increment a count function, it needs to know what its incrementing onto - the previous state is its only point of reference.

State in redux is "read-only", meaning we can't change it, well, sort-of. The only way to change the state is to 'emit' or dispatch an action, an object describing what happened.
The store object itself has a very small API considering what it's capable of, it only has four methods

store.dispatch(action)
store.subscibe(listener)
store.getState()
replaceReducer(nextReducer)

no set state method... that's for sure. the dispatch() method is almost certainly the most important thing to grasp here. the method sends an object to Redux, known as an action. typically the action can be described as a "payload" that carries a "type" along with the other data that could be used to update the state.

The third major concept crucial to understanding redux
Changes are made with Pure Functions
Given we understand Redux doesn't allow the application to make direct state changes, instead the dispatched action "describes" the state change. Reducers are just the pure function I mean, they're functions you'll write to handle whatever the dispatched action was and define HOW the app state changes. The general data flow can be represented as:

** Quick overview on React Redux setup **

Installation

//create new react app
$ npm install -g create-react-app
$ create-react-app < APP-NAME >

//(optional) install Yarn
$ npm install --global yarn

//install redux  
$ npm install redux
$ npm install react-redux

First up, lets create the store

import { createStore } from 'redux'
createStore(reducer, [preloadedState], [enhancer])

How do we access the store? something called Provider is going to wrap our App.

import { Provider } from 'react-redux'
  <Provider store={store}>
  </Provider>,
)

allowing that access ** {connect} ** needs to be imported, so when we export our component, we export it with connect.

import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);

last big one ** mapStatetoProps ** or ** mapDispatchToProps **
lets use Panda's for example.

const mapStateToProps = (state) => ({ pandas: state.pandas })

const mapDispatchToProps = (dispatch) => {
  return {
    createPanda: (panda) => dispatch({ type: 'CREATE_PANDA', character }),
  }
}

Given what we have above, we've exemplified merely the methods required for just getting information to the store, and the steps along the way. Some of the 'cons' you'll hear about Redux is that it requires a serious critical mass of boilerplate code just to get started doing the things we want to end up utilizing redux for. If you think your app will be robust enough to take full advantage to the features redux has to offer, I highly recommend using Redux.

Hooks at a Glance

Tinkerjoe-Git — Sun, 27 Jun 2021 18:01:40 +0000

So, What're Hooks?

Hooks are a new addition in React 16.8. They are JavaScript functions that let you use state and other React features without writing a class (Hooks don’t work inside classes). Other than that, there's little to no disadvantage.

Hook ('useState')

I mentioned we can use state, well 'useState' enables you to add state to functional components. We call this Hook inside a functional component to add some local state to it. React will preserve this state between re-renders.

const [state, setState] = useState(initialState);

This'll return a stateful value, and a function(setState) for updating. For example.

import React, { useState } from 'react';

function Example() {
  const [total, setTotal] = useState(0);
  return (

      <h1>clicked {total} times</h1>
<pre class="highlight plaintext"><code>  &lt;button onClick={() =&gt; setTotal(count + 1)}&gt;Button&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<p>);<br>
}</p>
<pre class="highlight plaintext"><code>


&lt;p&gt;You can hook it up as many times as you want in the same function. &lt;/p&gt;



</code></pre>
<p>function ExampleWithManyStates() {<br>
  // Declare multiple state variables!<br>
  const [age, setAge] = useState(42);<br>
  const [fruit, setFruit] = useState('banana');<br>
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);<br>
  //<br>
}</p>
<pre class="highlight plaintext"><code>

&lt;p&gt; Looking at the equivalent for class component would just take up a lot of space, you get it.&lt;/p&gt;

##* Hook ('useEffect')

&lt;p&gt; Effect Hook serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API(simply working as all three combined). The function passed to useEffect will be called(run) after the render is committed to the screen. In other words, by using this Hook, you tell React that your component needs to do something after render.&lt;/p&gt;



</code></pre>
<p>import React, { useState, useEffect } from 'react';<br>
function Example() {<br>
  const [total, setTotal] = useState(0);</p>

<p>// Similar to componentDidMount and componentDidUpdate: <br>
  // Update the document title using the browser API<br><br>
useEffect(() =&gt; {document.title = <code>clicked ${total} times</code>;});<br>
  return (<br>
    </p><br>
      <h1>clicked {total} times</h1><br>
      <button> setTotal(total + 1)}&gt;<br>
        Button<br>
      </button><br>
    <br>
  );<br>
}
<pre class="highlight plaintext"><code>

&lt;p&gt; So you can see, we're hitting more than a few birds with this Hookstone if you will, even if you wont...what if we want call this function when only certain value changes(update)? That is why we need second parameter which called as dependency array.
Dependency array is the second optional parameters in the useEffect function. The Effect will only executed when the second parameter value of array updated and inside the array we can put more then one value.



</code></pre>
<p>const App=()=&gt;{<br>
  const [value, handleChange] = useFrom({ email: "", password: ""});<br>
  useEffect(()=&gt;{<br>
    console.log("render");<br>
  }, [values.password]);</p>

<p>return(<br>
    </p><br>
    &lt;&gt;<br>
      <br>
      <br>
    &lt;/&gt;<br>
    <br>
   );<br>
};
<pre class="highlight plaintext"><code>

&lt;p&gt; So whenever {values.password} changes then the Effect fires off again and again.

If you put second parameter as empty array [], it will only implement componentDidMount not componentDidUpdate. So, doing so will evoke when there are any changes. In other words, re-render is not going to call the Effect anymore and render only when component Mount.&lt;/p&gt;

##Effect Hook cleanup on isle...your code
Simply put return function inside userEffect will performs the cleanup when the component unmount which is similar to componentWillUnmount.



</code></pre>
<p>useEffect(()=&gt;{<br>
    console.log("render");</p>
<pre class="highlight plaintext"><code>return ()=&gt;{
  console.log("unmount");
}
</code></pre>
<p>}, []);</p>
<pre class="highlight plaintext"><code>

Remember to clear up the old value before you try and get a new one.

##Lastly
Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions, it won't work out.



























</code></pre>

Why we use JS's Async functions.

Tinkerjoe-Git — Sun, 30 May 2021 23:16:12 +0000

An Asynch function is a function declared with the async declaration keyword.

Another keyword often used in tandem with async is await which enables asynchronous promises to be written more simply by avoiding the explicit coding of a promise chain.

before going any further, why are we interested in asynchronous JS anyways?

To get to where we're going we have to understand Javascript is a single threaded language - which means exactly it can execute one piece of code at a time - that's it. When we're doing things synchronously each process must complete and everything else gets blocked or essentially queued up until we can move past the current line of code being completed...seriously? seriously

Given the perceived demands and complexity of modern applications / browsers, users aren't going to simply wait around for your bulky code to execute. Think about image rendering for instance, this is paused until the stack is cleared and resolved essentially.

Asynchronous JS

To avoid the aforementioned 'blocking' we use async callbacks, which will start executing in the background, when its finished running the callback is called.

btn.addEventListener('click', () => {
  alert('You clicked me!');

the second param () is the callback function once the click is heard. The code above is arguably a more 'dated' way to be writing async code, I wouldn't be doing flatiron any justice if I didn't show you the worse way to do things first ^_^.

Promises

Promises are the 'newer' more modernized async code. For my project I'm grabbing 'card/deck' data from my API.

    getDecks(){

        fetch(this.baseDeckURL)
        .then(r => r.json())
        .then(decks => {
            decks.forEach(deck => {
                const d = new Deck(deck)
                d.addToDom()
            })
        })
        .catch(err => console.warn(err))
    }

fetch is taking in a single URL param, and returning a promise.
The promise being an object which represents the (ideal) completion or perhaps failure of the async operation. Now, the fetch does technically have to await the result of our browser to complete the function like anything else. Essentially the queuing of the event allows the main code to finish so as to not block any further events. The name of the game here is to have your user experience be a smooth one, as opposed to being bogged down by code running and fetching, waiting for downloads and so on. In these simple terms we can understand the purpose of wanting to code our JS functions asynchronously.

CSRF Tokens and You

Tinkerjoe-Git — Mon, 03 May 2021 02:56:49 +0000

Cross-site request forgery

CSRF deals with a web security vulnerability that would allow an attacker or unauthenticated third party to manipulate data in malicious ways to exploit unprotected web applications.

Largely the stakes are not particularly high in our cushy environment at flatiron, but dealing with CSRF in the professional world is going to be expected. Depending on what market you're dealing with, the stakes can certainly go sky high if a malicious party manipulates financial information.

Lets go through the basics. The CSRF token will be a unique token embedded in your sites HTML. When a user makes a POST request, the token is sent along with the request. In a rails environment, the token will be compared with the one stored in cookies for the authenticity.

Lets go to our application_controller.rb. Where we are going to enable this functionality.

protect_from_forgery with: :exception

Let's get our meta tags in order on our application.html.erb

<%= csrf_meta_tags %>

bear in mind, if you're using bootstraps or copying in an existing template, your tags may be already within the header section.

You won't see the actual token contents in your IDE when its running. Instead go to your localhost http://127.0.0.1:3000 and right click and hit "Inspect". Now we're in our DevTools, in the header section you'll see the actual contents of the generated token. This can be relevant to debugging when you're getting invalid POST errors. Next up on our POST view forms, inside the

<form> 
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
</form>

along with the rest of your form code, you'll want this, you'll in-fact need this. Largely you're all set-up, there's way more stuff going on under the hood, but this is a great place to start.
Caveat! if you're doing a

form_with(model: url: exmaple_path) do |f|

Rails is magically taking care of that hidden field token for you.

CRUD'y Remedies for your Project

Tinkerjoe-Git — Mon, 29 Mar 2021 02:11:43 +0000

Don't bite off more than you can chew

With the past two coding projects, limiting the scope of my own desires has been a thorn in my side. This go around I thought I'd go ahead and make a DnD ( Dungeons and Dragons ) character creator app. A bad idea doesn't always sound like a bad idea at first, but it'll let you know relatively quick when it comes to coding out an application. Importing the data from the DnD5e.api was already giving me some bad vibes, like I'll need oh, y'know like...14 tables that I'll need to incorporate associations and foreign keys into.

here's a spell

        {
          "index": "acid-arrow",
          "name": "Acid Arrow",
          "desc": [
            "A shimmering green arrow streaks toward a target within range and bursts in a spray of acid. Make a ranged spell attack against the target. On a hit, the target takes 4d4 acid damage immediately and 2d4 acid damage at the end of its next turn. On a miss, the arrow splashes the target with acid for half as much of the initial damage and no damage at the end of its next turn."
          ],
          "higher_level": [
            "When you cast this spell using a spell slot of 3rd level or higher, the damage (both initial and later) increases by 1d4 for each slot level above 2nd."
          ],
          "range": "90 feet",
          "components": [
            "V",
            "S",
            "M"
          ],
          "material": "Powdered rhubarb leaf and an adder's stomach.",
          "ritual": false,
          "duration": "Instantaneous",
          "concentration": false,
          "casting_time": "1 action",
          "level": 2,
          "attack_type": "ranged",

          "damage": {
            damage_type: {
              name: "Acid",
              url: "/api/damage-types/acid",
            },
            damage_at_slot_level: {
              2: "4d4",
              3: "5d4",
              4: "6d4",
              5: "7d4",
              6: "8d4",
              7: "9d4",
              8: "10d4",
              9: "11d4",
            },
          },

          "school": {
            "name": "Evocation",
            "url": "/api/magic-schools/evocation"
          },
          "classes": [
            {
              "name": "Wizard",
              "url": "/api/classes/wizard"
            }
          ],
          "subclasses": [
            {
              "name": "Lore",
              "url": "/api/subclasses/lore"
            },
            {
              "name": "Land",
              "url": "/api/subclasses/land"
            }
          ],
          "url": "/api/spells/acid-arrow"
        }

So yeah... that belongs to a character who belongs to a class, or maybe their subclass, I can go on... but lets not.

Start Simple and Build in Functionality

Find something you like, it goes without really having to explain that building out some of these projects can get tedious, and if you're already not engaged with the subject matter I only see things getting worse. I started working with the Studio Ghibli API, [link](https://ghibliapi.herokuapp.com/) and considering the scope of my previous efforts, this is a lot more manageable. I think immediately my concern was that '..what're you going to do with this information, that anyone would care or have a use for?..' I quelled that notion pretty quickly; it doesn't matter. When I say it doesn't matter, its all about context. The context I am in, I'm not about to market this app, or proclaim its greatness to the four winds. I'm building a project, for coding school so I can learn to code. Manipulating the data and actually hitting the benchmarks for a successful project are where the learning and real experience happen. You can have the best idea, but if you're not capable of pulling it off at your level, you're just hindering your end product.

Scaffold out Everything First, Period

I was on a great path, I built out functionality for the site and felt like I was 80% of the way complete. I had this lingering fear that I'd hate the CSS portion, ( which styling is not necessarily requisite ) many users alleviate this anxiety with just having bootstrap do the heavy lifting, which honestly, do that. I had fallen down the CSS well and drank deep from its plenty, I think I spent 2 days working on styling before I started to hit walls within my MVC logic and other CSS prisons of my own design. Its my strong recommendation through my own follies that I recommend saving CSS and any other peripheral or auxiliary functions for your spare time when you've checked off the requirements first.

I'm pleased with my end result, and falling down the various pits of despair along the way will doubtlessly help me out on my next project if I'm wise enough to listen to my own advice.

A New Way to Draft MTG

Tinkerjoe-Git — Sun, 28 Feb 2021 05:57:17 +0000

In part, this project was motivated by self serving means. Magic the Gathering has always had the corner on the market regarding high fantasy trading cards and collectables; while additionally having a vast competitive scene. Part of that competitive landscape is a popular format that its subdivisions all fall under the label of 'limited' which involves deck construction on the spot from a limited pool of cards. Anyone who has played the game above the very most casual level can tell you that Magic (MTG) is heavily pay-gated at every step. Drafting or limited is one of the formats that can circumvent the general level of expense, however it largely costs $20 minimum to draft either digitally or in person.

The Cube Draft CLI project is functionally a free limited draft program, I've included a data/cube.txt file in the repo which is an accurate representation of the 'vintage-cube'; one of the more coveted limited card pools, which is unthinkably expensive in paper magic. The project simulates the experience of sitting down and drafting magic through the command-line-interface. Players are able to shuffle up the shared card pool, each draws 15 at random and begins selecting their deck. Players are able to grab pertinent pieces of information from individual cards that are displayed with index to the player.

The def_lookup! method really disciplined my coding toward being as informed as possible regarding my objects and their assigned attribute accessors from the API. Binding.pry was not only instrumental in my understanding of exactly what these objects qualities looked like, but it was nigh requisite. I spent a great deal of time trying to figure out why it is my color assignment method wasn't functional. I knew these objects had a key value pair for [:colors] and I foolishly assumed it was simply a string that looked like "red". I was confident to the degree that I looked absolutely everywhere else but precisely my problem. A simple binding.pry underneath puts "Cmc: #{card.cmc}" informed me to my dismay that it was ["Red"]. Sometimes a simple return to the basics will humble your process.

Despite being fairly harrowing overall at first, the road blocks and dysfunctional methods overall led to the solidification of a great deal of our materials for phase-1. The cliche' of the blank page is more real that it isn't, certainly for your first program. Once the program was constructed in a meaningful way, I rather enjoyed incorporating a small number of flourishes to the CLI, for instance coloring the text of a card in its corresponding color in MTG. The net result is something I'm proud to have done, and excited to share.

A Career's Sunset

Tinkerjoe-Git — Fri, 12 Feb 2021 23:43:25 +0000

"Bring anger and pride under your feet, turn them into a ladder and climb higher." - Rumi

For the past decade, I've spent every weekend, and major holiday hunkered down in some of the finest kitchens a major American city had to offer; working towards mastering a craft truly poured myself into. I missed birthdays and funerals, the birth of my niece, among many other life events. This fact is not something distinct to my story, its how professional fine dining kitchens function; which is primarily upon the passion and grit of those who chose this vocation. This time last year I was just about burnt out, being the 'Chef de Partie' at The Four Seasons was an excruciatingly demanding job. By that juncture I had learned just about everything I ever dreamt to know about the culinary world.

Learning has always been the spark that drives me, I was no longer learning, aptly so I was the one doing the teaching. I've always coveted area's of knowledge where the skill ceiling is practically untouchable. I identified years ago during my undergraduate studies that coding had exactly these qualities. Post college, the job market in 2011 was still stifled by several economic mishaps - so finding a job wasn't exactly panning out for me. For practicalities' sake, kitchens were an easy gig to get, it wasn't before long that I saw all the qualities I admired about my other pursuits in cooking. The rest was history as they say.

Here we are now, full circle. The pandemic gave me the window I needed to slow down and get my priorities straight. I began getting certified by Google in several technical fields, and pivoting my career back to technology didn't seem so out of reach as it once did. I began to feel that learner's mindset returning to me, and with it I knew that I was ready to take on something new once more. The into the fire approach so to speak has always been appealing to me, so it wasn't long before I had fixated on Flatiron as exactly that.

I can extoll upon the qualities I see mirrored in coding from the world of cooking all day, but to be concise I'll spare us. There is an element of creation, making something distinctly yours from raw building blocks so to speak. There is the personal flourish that makes your work its own, and there is the real sense of honing a set of skills that are applicable in the minute and minutia onto then the macro scale. Within coding I recognize the same 'kernal' of possibility and greatness.