redux-from-scratch-1.md

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 () {
  return new Store(); // we'll write this constructor function ourselves shortly!
}

// now we can create a "store" object by invoking createStore
const store = createStore();

The Redux store also has "private" access (via closure) to two variables - the "currentState" (an object) and a "reducer" (a function that we'll write). Let's update our createStore function to include them:

function createStore () {

  let currentState = {};
  let reducer = null; // for now

  return new Store();
}

The Redux store is just an object with three methods (actually there's 4, but we won't bother with the fourth for now because chances are you'll never need it).

store.getState store.dispatch store.subscribe

Let's write a constructor function within our createStore:

function createStore () {

  let currentState = {};
  let reducer = null;

  // our constructor function
  function Store () {}
  // our .prototype methods
  Store.prototype.getState = function () {};
  Store.prototype.dispatch = function () {};
  Store.prototype.subscribe = function () {};

  return new Store();
}

The store.getState method is pretty easy - it just gives us access to that private currentState object!

function createStore () {

  let currentState = {};
  let reducer = null;

  function Store () {}
  Store.prototype.getState = function () {
    return currentState; // piece of cake!
  };
  Store.prototype.dispatch = function () {};
  Store.prototype.subscribe = function () {};

  return new Store();
}

Now we can get the "currentState" object that the store is holding. But how do we change the state? We need two things:

• A "reducer" function, which will change the currentState object
• Our store.dispatch method, which will expose the ability to invoke the reducer to us (similar to the way getState exposes the currentState to us)

In the next section, we'll talk about the "reducer" function.