beforeValidate
--- validations are checked ---
afterValidate
beforeCreate
-- 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%' |
-- 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 |
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!
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.
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.
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';
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 = {};
In this tutorial, we'll understand what the Redux store does by building it ourselves, step by step.
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 () {