tmkelly28

-- show running queries (pre 9.2)
SELECT procpid, age(clock_timestamp(), query_start), usename, current_query 
FROM pg_stat_activity 
WHERE current_query != '<IDLE>' AND current_query NOT ILIKE '%pg_stat_activity%' 
ORDER BY query_start desc;

-- show running queries (9.2)
SELECT pid, age(clock_timestamp(), query_start), usename, query 
FROM pg_stat_activity 
WHERE query != '<IDLE>' AND query NOT ILIKE '%pg_stat_activity%' 

tmkelly28

-- Functors
-- fmap :: (a -> b) -> f a -> f b
class MyFunctor f where
  fmap :: (a -> b) -> f a -> f b

data Perhaps a = Surely a | Naught deriving (Show)

instance Eq a => Eq (Perhaps a) where
  (Surely x) == (Surely y) = x == y
  Naught == Naught = True

tmkelly28

When we create an instance:

beforeValidate

--- validations are checked ---

afterValidate

beforeCreate

tmkelly28

Client v Server

Whenever we're dealing with web pages, we say that our browser (i.e. Chrome) is the "client" and the process running on the computer connected to the internet that sends a web page in response to the browser's request is the "server".

Remember that a server is just a process that sends data in response to certain requests. It knows how to respond to requests because the request is formatted using the HTTP protocol (and likewise, the client knows how to receive it because the response also adheres to the HTTP protocol). The computer running the "server process" exposes that process to the internet so that people can make requests to it.

At Fullstack, we like to say that the server is somewhere far away, like "Norway". This is because when you write your own server programs, they'll be running on the same machine as your browser, but this won't be the case in real life!

Getting Started with Express

tmkelly28

Part 6. React-Redux (the "connect" function)

As Dan Abramov (the creator of redux) has stressed multiple times, the redux library doesn't know anything about react. We could use it wherever we wanted - we might use it to simplify stateful web applications built with libraries like angular or even jquery.

But since we know we want to use react, let's use a helper library like react-redux to simplify the way our stateful components communicate with the redux store.

Right now, our "container" components have the following 4 jobs:

Job 1. Subscribe to the redux store when the component mounts.

tmkelly28

Part 5. Connecting a React component to the store

Let's return to our original task now: we want to make it so that our React component will use the state from the store instead of managing it on its own. When we update the state within the store (using dispatch), this should do the same thing that setState does.

That being said, React doesn't give us a way to replace state and setState. If we want a component to re-render, we need to use setState - it's the only way.

This could be tricky, so let's take it step by step.

First, let's make it so that this.state is initialized to be the result of saying store.getState(). This way, we at least start with the state on the component initialized to be the state inside the store.

tmkelly28

Part 4. Usage with React

Now that we know how createStore works, and we know how to write reducer functions, we can use it to manage state in our applications!

We want to write a React application that uses Redux for state management. However, Redux doesn't know anything about React. (There is a library called react-redux, which provides a special method that we can use to make React and Redux talk to each other in an intuitive way, but we won't use it for now. We'll see how it works fairly soon, though.)

Let's say we have a React component that renders a simple counter. Something like this:

import React from 'react';

tmkelly28

Part 3 - The Store (con't)

Here's where we left off:

const reducer = toyCarReducer; // pretend that this is the reducer for the toy car we just wrote!

function createStore (reducer) {

  let currentState = {};

tmkelly28

Part 2 - Reducer Functions

Let's talk about the "reducer" function. The "reducer" function is going to be unique to each app. When we invoke createStore, we pass in our "reducer" function as the first argument:

const reducer = function () {} // we'll flesh this out shortly!

function createStore (reducer) { // we pass the reducer in as a first argument!

  let currentState = {};

tmkelly28

In this tutorial, we'll understand what the Redux store does by building it ourselves, step by step.

---

Part 1 - The Store

The main thing that Redux gives us is a method called createStore. We use createStore to get an instance of a store. We might imagine createStore as working like this:

function createStore () {