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

<hr/>

# 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:

```js
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:

```js
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`:

```js
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!

```js
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.

<hr/>

# 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:

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

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

  let currentState = {};
  let reducer = reducer; // our store will have access to the reducer via closure

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function () {};
  Store.prototype.subscribe = function () {};

  return new Store();
}
```

Most of the work we do in an app using `redux` is spent writing the reducer function.

Say we have a toy car that we can operate via a remote control. We can make the car move forward, back, left and right. We could represent the "state" of this car as an x-coordinate and a y-coordinate on a 2D plane.

```js
// let's say our toy car starts at (0, 0)
const remoteControlCarState = {
  x: 0,
  y: 0
};
```

We can imagine that, when we tell the toy car to go "forward" (via our remote control), the y-coordinate on our toy car's state will increase by one unit, and when we tell it to go "back", the y-coordinate will decrease by one unit. Likewise, when we tell it to go "left", the x-coordinate on the toy car state will decrease, and increase when we tell it to go "right".

A "reducer" function for the remote control car would describe how the remote control car's "state" object changes with each command we give it. We might write out something like this:

```js
const remoteControlCarState = {
  x: 0,
  y: 0
};

function reducer (command) {
  if (command === 'FORWARD') remoteControlCarState.y += 1;
  else if (command === 'BACK') remoteControlCarState.y -= 1;
  else if (command === 'LEFT') remoteControlCarState.x -= 1;
  else if (command === 'RIGHT') remoteControlCarState.x += 1;
}

reducer("FORWARD");
console.log(remoteControlCarState); // { y: 1, x: 0 }
reducer("RIGHT");
console.log(remoteControlCarState); // { y: 1, x: 1 }
```

It works! However, there's a problem - when we receive each command, we are `mutating` the state object (that is, we're directly changing the same object in memory). Say that someone enters a series of commands, and the car ends up in an unexpected place somehow. We want to figure out how it got there. However, we have no record of how the car's state changed over time. We would have to guess what combination of commands caused the car to get out of whack, and try to reproduce the problem ourselves. It would be MUCH easier if we could just look back and see how the car's state changed every time it got a command.

This is why, instead of mutating the state object, the reducer function gives us a _new_ object each time. Every time we make a change, the reducer gives out a new object representing our new state. We can refactor our previous function to work like this now:

```js
const initialRemoteControlCarState = {
  x: 0,
  y: 0
};

// our reducer function will now take a command, AND the previous state object
function reducer (previousState, command) {

  // we can cleverly use Object.assign to make a copy of our previous state
  const newState = Object.assign({}, previousState);

  if (command === 'FORWARD') newState.y += 1;
  else if (command === 'BACK') newState.y -= 1;
  else if (command === 'LEFT') newState.x -= 1;
  else if (command === 'RIGHT') newState.x += 1;

  return newState; // now we return the new state object
}

const state1 = reducer(initialRemoteControlCarState, "FORWARD");
console.log(state1); // { y: 1, x: 0}
const state2 = reducer(state1, "RIGHT");
console.log(state2); // { y: 1, x: 1 }
```

This is nice because now we have our record of changes - this will be much easier to debug! This is a fairly small example, so you still may not understand the benefit of doing this. However, once you start writing larger and larger applications, you'll start to realize the advantages of doing this - please just humor us for now.

There are only a couple of differences between the reducer functions we'll write and the one we wrote above:

1. What we've been calling "commands" are called "actions" by the Redux community.
2. "Actions" are usually not just string literals (like "FORWARD" or "RIGHT"), but objects that have a "type" property, and that "type" property has the name "FORWARD" or "RIGHT", etc. This is because actions might have more information on them that just their type.
3. Instead of using if...else if...else, many folks in the Redux community use the `switch` statement
4. We usually make our initial state the "default" value for the first argument (previousState). This way, if we don't have a previousState yet (that is, we're invoking the reducer for the first time), it will give us back our initial state!

Note this is all by **convention** - you could write it differently and name things differently and still have it work, but it would be confusing for other people in the Redux community.

```js
// command is called action
// also, if someone invokes the reducer without a previousState, this will give us our initial state back!
function reducer (previousState = { y: 0, x: 0}, action) {

  const newState = Object.assign({}, previousState);

  // we often use switch instead of if...else - many find it easier to read, because there are fewer curly braces
  switch (action.type) { // actions always have a property called type, which contains the name of the action
    case "FORWARD":
      newState.y += 1;
      break;
    case: "BACK":
      newState.y -= 1;
      break;
    case "LEFT":
      newState.x -= 1;
      break;
    case "RIGHT":
      newState.y += 1;
      break;

    return newState;
  }
}

const initialToyCarState = reducer(undefined, {});
console.log(initialToyCarState) // { y: 0, x: 0 }
const state1 = reducer(initialState, { type: "FORWARD" });
console.log(state1); // { y: 1, x: 0}
const state2 = reducer(state1, { type: "RIGHT" });
console.log(state2); // { y: 1, x: 1 }
```

And that's how to write a basic reducer function! To summarize, here are the rules for writing a reducer function:

1. It must take a (previous) "state" object as its first argument
2. It must take an "action" object as its second argument
3. It must return a new "state" object each time
4. It must never mutate the previous state object

Now that we have an idea of what reducer functions do and how to write them, let's see what the `store` does with it, in the next section.

<hr />

# Part 3 - The Store (con't)

Here's where we left off:

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

function createStore (reducer) {

  let currentState = {};
  let reducer = reducer;

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function () {};
  Store.prototype.subscribe = function () {};

  return new Store();
}

const store = createStore(toyCarReducer); // creates a store that uses our toyCarReducer
```

In the last section, we saw how we can use the reducer function we wrote to generate a new state object. We just needed pass in the previous state and an action. Now that the `store` has both our reducer and our currentState. We just need a way to pass actions to our reducer. This is what `store.dispatch` does.

```js
const reducer = toyCarReducer;

function createStore (reducer) {

  let currentState = {};
  let reducer = reducer;

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function (action) {
    currentState = reducer(currentState, action); // invoking store.dispatch "resets" our currentState to be the result of invoking the reducer!
  };
  Store.prototype.subscribe = function () {};

  return new Store();
}

const store = createStore(toyCarReducer);
```

Also, remember that if we invoke the reducer with `undefined` as the first argument, it will give us our initial state! The `createStore` function expects you to write reducer functions that do this. As long as we follow the rules for how a reducer function should work, this will cause the first value of "currentState" to be our initial state.

```js
const reducer = toyCarReducer;

function createStore (reducer) {

  // our first "currentState" is the result of invoking the reducer with undefined, and a dummy action
  let currentState = reducer(undefined, {});
  let reducer = reducer;

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function (action) {
    currentState = reducer(currentState, action);
  };
  Store.prototype.subscribe = function () {};

  return new Store();
}

const store = createStore(toyCarReducer);

const initialState = store.getState() // { y: 0, x: 0 }
store.dispatch({ type: "FORWARD" });
const state1 = store.getState() // { y: 1, x: 0 }
```

When we `store.dispatch` an action, we invoke our reducer with the currentState and the action, and reassign currentState to be the result.

This works great! It would be nice to know _when_ the state changes though. That way, if we need to do something every time our state changes (like update our UI), we can deal with it. This is exactly what `store.subscribe` is for.

`store.subscribe` takes a callback function we want to invoke every time the state is changed. We can make as many "subscriptions" as we like - it stores them in another "private" array.

```js
const reducer = toyCarReducer;

function createStore (reducer) {

  let currentState = reducer(undefined, {});
  let reducer = reducer;
  let listeners = []; // set aside a listeners array that we have access to via closure

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function (action) {
    currentState = reducer(currentState, action);
  };
  Store.prototype.subscribe = function (callback) { // store.subscribe takes a callback...
    listeners.push(callback);                       // and pushes it in the listeners array
  };

  return new Store();
}

```

Whenever we're done changing our state, we want to invoke all of these listeners. We can bake this right into `store.dispatch`.

```js
const reducer = toyCarReducer;

function createStore (reducer) {

  let currentState = reducer(undefined, {});
  let reducer = reducer;
  let listeners = [];

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function (action) {
    currentState = reducer(currentState, action); // first we update the state...
    listeners.forEach(callback => callback()); // ...then we invoke all the listeners!
  };
  Store.prototype.subscribe = function (callback) {
    listeners.push(callback);
  };

  return new Store();
}


const store = createStore(toyCarReducer);

// we "subscribe" a callback function
store.subscribe(() => console.log('Hey, the state changed to be: ', store.getState()));

store.dispatch({ type: "FORWARD" }); // we would see "Hey, the state changed to be: { y: 1, x: 0 }" logged to the console
```

Sometimes we might want to cancel our subscription. To help us to this, `store.subscribe` returns a function. When we invoke that function, it will remove the callback from the listeners array. This is similar to how `setInterval` gives us an interval id back, which we can then pass to `clearInterval`.

```js
const reducer = toyCarReducer;

function createStore (reducer) {

  let currentState = reducer(undefined, {});
  let reducer = reducer;
  let listeners = [];

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function (action) {
    currentState = reducer(currentState, action);
    listeners.forEach(callback => callback());
  };
  Store.prototype.subscribe = function (callback) {
    listeners.push(callback);
    // store.subscribe now returns a function
    return function () {
      // all this function does is remove the callback we passed in from the listeners array!
      listeners = listeners.filter(cb => cb !== callback);
    }
  };

  return new Store();
}


const store = createStore(toyCarReducer);

// we "subscribe" a callback function, AND store the function we get back in a variable called "unsubscribe"
const unsubscribe = store.subscribe(() => console.log('Hey, the state changed to be: ', store.getState()));

store.dispatch({ type: "FORWARD" }); // we would see "Hey, the state changed to be: { y: 1, x: 0 }" logged to the console

unsubscribe(); // invoking the function we stored in "unsubscribe" remove the subscription!

store.dispatch({ type: "FORWARD" }); // nothing logs to the console this time! We removed that listener!
```

And that's it! That's all there is to Redux! (Well, okay, the real Redux has a few more features, but this is fundamentally how a Redux store operates).

Here's our final result:

```js
const reducer = toyCarReducer;

function createStore (reducer) {

  let currentState = reducer(undefined, {});
  let reducer = reducer;
  let listeners = [];

  function Store () {}
  Store.prototype.getState = function () {
    return currentState;
  };
  Store.prototype.dispatch = function (action) {
    currentState = reducer(currentState, action);
    listeners.forEach(callback => callback());
  };
  Store.prototype.subscribe = function (callback) {
    listeners.push(callback);
    return function () {
      listeners = listeners.filter(cb => cb !== callback);
    }
  };

  return new Store();
}
```

# 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:

```js
import React from 'react';
class Counter extends React.Component {

  constructor () {
    super();
    this.state = { count: 0};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick () {
    this.setState({ counter: this.state.counter + 1 })
  }

  render () {
    return (
      <div>
        <h3>The count is: { this.state.count }</h3>
        <button onClick={this.increment}>Increase</button>
      </div>
    )
  }
}
```

Right now, this component's state is managed by the React component. However, we want it to be in the Redux store instead. To start writing our redux store, we'll ask ourselves three questions:

### Question One: What actions can the user take in our app?

We want to create a store. To create a store, we need to create a reducer function. To create our reducer function, we need to think about the **actions** that a user can take in our application (either actively, by clicking a button, or passively, by loading the page).

What actions can be taken in our React component above?

...

Just the one - clicking the button. Clicking the button causes the counter to increment. Let's imagine this action as a string constant, the same way we imagined the actions the user could take with the remote control car.

```js
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
```

We've written an **action type**. Thinking about our application in terms of **action types** will help make sure that our state is focused on actual user interactions. This will help us keep our state simple and lean.

### Question 2: How can we represent the state of our app?

In both React and Redux, we represent the state of our application as a JavaScript object. Ideally, we should represent it as a JavaScript object with all of the *default values* of our state filled in.

What would this look like for our counter application?

...

It would look very similar to the way it does in our React component. We'll put it in a variable called "initialState":

```js
const initialState = {
  count: 0
}
```

The only thing that changes over time in our application is the number of the count. Therefore, we'll represent state as an object with a key-value pair of count, which we initialize at 0.

### Question 3: How does our state change in response to our actions?

When someone performs an action, we want our state to change in response. This is what the reducer is for! Remember what a reducer function looks like:

```js
const initialState = { counter: 0 };

function reducer (prevState = initialState, action) {

  const newState = Object.assign({}, prevState);

  switch (action.type) {

    // switch on our action types here...

  }

  return newState;

}
```

Our only action type is `INCREMENT_COUNTER`, so we simply need to describe how the state changes in that case.

```js
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

const initialState = { counter: 0 };

function reducer (state = initialState, action) {

  const newState = Object.assign({}, state);

  switch (action.type) {

    case INCREMENT_COUNTER:
      newState.counter += 1;
      break;

  }

  return newState;

}
```

Remember, the reducer needs to return a **new** object each time - it must **not** mutate the previous state object directly. This is why we create a copy of the previous start first, and then apply the changes to that.

Now that we have our reducer, we can create our store:

```js
import { createStore } from 'redux';

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

const initialState = { counter: 0 };

function reducer (state = initialState, action) {

  const newState = Object.assign({}, state);

  switch (action.type) {

    case INCREMENT_COUNTER:
      newState.counter += 1;
      break;

  }

  return newState;

}

const store = createStore(reducer);

export default store;
```

Now that we have our store, let's examine the initial state that it contains:

```js
store.getState(); // { counter: 0}
```

It's equal to the default argument from our reducer function, just like we expected.

Remember that to change the state, we need to dispatch an action with a type of `INCREMENT_COUNTER`.

```js
store.dispatch({ type: INCREMENT_COUNTER });
store.getState(); // { counter: 0 }
```

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.

```js
import React from 'react';
import store from '../ourStore';

class Counter extends React.Component {

  constructor () {
    super();
    this.state = store.getState(); // this.state starts out as the state inside the store
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick () {
    this.setState({ counter: this.state.counter + 1 })
  }

  render () {
    return (
      <div>
        <h3>The count is: { this.state.count }</h3>
        <button onClick={this.increment}>Increase</button>
      </div>
    )
  }
}
```

# Part 5 - React-Redux