Learn how to use the Redux API method `createStore()`, the `store` methods, and how to connect a `store` to a React application.

Intro to the Core Redux API

The core concepts of Redux are closely tied to a framework known as [Flux](https://facebook.github.io/flux/docs/in-depth-overview). Both share the same concept of a one-way flow of data and a centralized store to reduce actions into the application's next state. While Flux was designed as a general pattern which one could follow to build applications, Redux is a library that provides concrete methods to help implement the framework. 

To make use of the Redux package, it can be installed using the **N**ode **P**ackage **M**anager (`npm`). Then, its methods can be imported.

Let's start by installing the `redux` package and importing its `createStore()` method. In the next exercise you'll learn how to use this method.


Install the Redux Library

Congratulations! You were able to apply the core concepts of the Redux framework by implementing an application using the Redux library. 

By completing this lesson, you are now able to:
* Install the redux library into your project using `npm install redux`.
* Import the `createStore()` helper function from the `'redux'` library.
* Create a `store` object that holds the entire state of your Redux application using `createStore()`.
* Get the current state of the `store` using `store.getState()`.
* Dispatch actions to the `store` using `store.dispatch(action)`.
* Create action creators to reduce the repetitive creation of action objects.
* Register a change listener function to respond to changes to the store using `store.subscribe(listener)`.
* Recognize the pattern for connecting Redux to any user interface.
* Implement a Redux application using either the HTML DOM API or React.

Throughout this lesson, you may have thought to yourself that Redux adds a lot of unnecessary complexity to these simple applications. We implemented Redux in a very basic way, which is useful for learning but not how it's done in the real world. 

Redux shines when it is used in applications with many features and a lot of data where having a centralized store to keep it all organized is advantageous. In the next lesson, you will learn how to build and organize Redux applications with complex state.

Review

Up until now, you have built a working counting application using Redux that lacks a proper user interface (UI). Let's change that!

The UI for this application should display the current count number and allow the user to increment or decrement this value using the buttons provided. Take a look at the connected web browser window and you can see that the elements for such an interface are present, but they haven't been connected to the Redux store yet.

Connecting a Redux store with any UI requires a few consistent steps, regardless of how the UI is implemented:
* Create a Redux store
* Render the initial state of the application.
* Subscribe to updates. Inside the subscription callback:
    - Get the current store state
    - Select the data needed by this piece of UI
    - Update the UI with the data
* Respond to UI events by dispatching Redux actions

These same steps are followed when building an interface using React, Angular, or jQuery. For now, we'll create a very simple user interface for the counting application using the [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API).

Open up the **index.html** file and you can see the three HTML elements that are currently being rendered:

```html
<p id='counter'>Waiting for current state.</p>
<button id='incrementer'>+</button>
<button id='decrementer'>-</button>
```

Now, open up **store.js** where you will find the pieces of Redux code that you have built throughout this lesson: the action creators `increment()` and `decrement()`, the reducer `countReducer`, and the `store` that ties it all together. Additionally, the following values have been added:
* `counterElement`, `incrementer`, and `decrementer`: references to the HTML elements in **index.html**
* `render`: A state-change listener for responding to changes to the `store`'s state.
* `incrementerClicked` and `decrementerClicked`: DOM event handlers for responding to the buttons being clicked by the user.

These new functions and elements will allow us to plug the Redux `store` into the UI. Let's begin.


Connect the Redux Store to a UI

In this lesson, you will learn how to apply the core concepts of Redux to a real Redux application.

Remember, Redux applications are built upon a one-way flow of data model and are managed by the _store_:
* The _state_ is the set of data values that describes the application. It is used to render the user interface (UI). 
* Users interact with the UI which dispatch _actions_ to the store. An action is an object that expresses a desired change to the state.
* The store generates its next state using a _reducer_ function which receives the most recent action and the current state as inputs. 
* Finally, the UI is re-rendered based on the new state of the store and the entire process can begin again.

Building an application that follows the core principles of Redux can be done without external libraries. However, the dedicated [Redux library](https://redux.js.org/) provides some very useful tools for handling the most common aspects of building a Redux application and helps ensure that the core Redux principles are enforced.

This lesson will focus on creating a basic Redux application with the `createStore()` method from the Redux API and the following related `store` methods:
* `store.getState()`
* `store.dispatch(action)`
* `store.subscribe(listener)`

_Note: The store method `store.replaceReducer(nextReducer)` is an advanced method and will not be covered in this course._


What is the Redux API?

In a typical web application, user interactions that trigger [DOM events](https://developer.mozilla.org/en-US/docs/Web/Events) (`"click"`, `"keydown"`, etc...) can be listened for and responded to using an [event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). 

Similarly, in Redux, actions dispatched to the `store` can be listened for and responded to using the `store.subscribe()` method. This method accepts one argument: a function, often called a _listener_, that is executed in response to changes to the `store`'s state.

```js
const reactToChange = () => console.log('change detected!');
store.subscribe(reactToChange);
```

In this example, each time an action is dispatched to the `store`, and a change to the state occurs, the subscribed listener, `reactToChange()`, will be executed.

Sometimes it is useful to stop the listener from responding to changes to the `store`, so `store.subscribe()` returns an `unsubscribe` function. 

We can see this in action in the light switch application:

```js
// lightSwitchReducer(), toggle(), and store omitted...

const reactToChange = () => {
  console.log(`The light was switched ${store.getState()}!`);
}
const unsubscribe = store.subscribe(reactToChange);

store.dispatch(toggle());
// reactToChange() is called, printing:
// 'The light was switched off!'

store.dispatch(toggle());
// reactToChange() is called, printing:
// 'The light was switched on!'

unsubscribe(); 
// reactToChange() is now unsubscribed

store.dispatch(toggle());
// no print statement!

console.log(store.getState()); // Prints 'off'
```

* In this example, the listener function `reactToChange()` is subscribed to the `store` 
* Each time an action is dispatched, `reactToChange()` is called and prints the current value of the light switch. It is common for callbacks subscribed to the `store` to use `store.getState()` inside them.
* After the first two dispatched actions, `unsubscribe()` is called causing `reactToChange()` to no longer be executed in response to further dispatches made to `store`.

> _Note: It is not always required to use the `unsubscribe()` function returned by `store.subscribe()`, though it is useful to know that it exists._

Now, take a look at **store.js** in the code editor. You will see that a few actions have been dispatched to the `store` of the counter application. Suppose you wanted to print the current value of `store.getState()` each time the state changes. While you could write something like this...

```js
store.dispatch(decrement());
console.log(`The count is ${store.getState()}`);
store.dispatch(increment());
console.log(`The count is ${store.getState()}`);
store.dispatch(increment());
console.log(`The count is ${store.getState()}`);
```

...we know that this approach is repetitive. Instead, you can subscribe a change listener to print out the current state in response to state changes automatically.

Respond to State Changes

As you know, every Redux application uses a reducer function that describes which actions can update the state and how those actions lead to the next state.

For example, suppose you wanted to build an application for a light switch. Its reducer might look like this:

```js
const initialState = 'on';
const lightSwitchReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'toggle':
      return state === 'on' ? 'off' : 'on';
    default:
      return state;
  }
}
```

This reducer handles a single action type `'toggle'` and returns the next state of the store: `'on'` if it had been `'off'` and vice-versa. If an unrecognized action is received, the current state of the store is returned.

The programmer could manually execute the reducer with the current state of the store and the desired action to perform like so:

```js
let state = 'on';
state = lightSwitchReducer(state, { type: 'toggle' });
console.log(state); // Prints 'off'
```

However, this is the main responsibility of the `store`. The `store` is an object that enforces the one-way data flow model that Redux is built upon. It holds the current state inside, receives action dispatches, executes the reducer to get the next state, and provides access to the current state for the UI to re-render.

Redux exports a valuable helper function for creating this `store` object called `createStore()`. The `createStore()` helper function has a single argument, a reducer function.

To create a `store` with `lightSwitchReducer`, you could write:

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

const initialState = 'on';
const lightSwitchReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'toggle':
      return state === 'on' ? 'off' : 'on';
    default:
      return state;
  }
}

const store = createStore(lightSwitchReducer);
```

For the remainder of this lesson, you will be building a simple counter application, whose state is a single number, using the Redux library.

In the code editor, you will find the `initialState` value as well as `countReducer`, which describes how the state can be updated in response to an `'increment'` action. 

Create a Redux Store

Now that you have implemented the counter app using the HTML DOM API, and have seen a working React+Redux application, it is time to implement it using React.

Take a look at the **store.js** file and you will find the following functions and values have been defined for you:
* The action creators `increment()` and `decrement()`
* The `store` and its reducer `counterReducer()`
* A React component called `CounterApp` which declares two event handlers, `onIncrementButtonClicked` and `onDecrementButtonClicked`
* A `render()` function which renders `CounterApp` using `ReactDOM.render()`

The React component `CounterApp` and the `render()` function are entirely disconnected from the Redux store. Let's change that!


Implementing a React+Redux App

The `store` object returned by `createStore()` provides a number of useful methods for interacting with its state as well as the reducer function it was created with.

The most commonly used method, `store.dispatch()`, can be used to dispatch an action to the store, indicating that you wish to update the state. Its only argument is an action object, which must have a `type` property describing the desired state change.

```js
const action = { type: 'actionDescriptor' }; 
store.dispatch(action);
```

Each time `store.dispatch()` is called with an `action` object, the store's reducer function will be executed with the same `action` object. Assuming that the `action.type` is recognized by the reducer, the state will be updated and returned.

Let's see how this works in the lightswitch application from the last exercise:

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

const initialState = 'on';
const lightSwitchReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'toggle':
      return state === 'on' ? 'off' : 'on';
    default:
      return state;
  }
}

const store = createStore(lightSwitchReducer);

console.log(store.getState()); // Prints 'on'

store.dispatch({ type: 'toggle' }); 
console.log(store.getState()); // Prints 'off'

store.dispatch({ type: 'toggle' });
console.log(store.getState()); // Prints 'on'
```

In this example, you can also see another `store` method, `store.getState()`, which returns the current value of the store's state. Printing its value between each dispatched action allows us to see how the store's state changes.

Internally, when the `store` executes its reducer, it uses `store.getState()` as the `state` argument. Though you won't see it, you can imagine that, when an action is dispatched like this…

```js
store.dispatch({ type: 'toggle'});
```
...the store calls the reducer like this:

```js
lightSwitchReducer(store.getState(), { type: 'toggle' });
```

Dispatch Actions to the Store

As you saw in the last exercise, you are likely to dispatch actions of the same type multiple times or from multiple places. Typing out the entire action object can be tedious and creates opportunities to make an error.

For example, in the light switch application, whose reducer accepts `'toggle'` actions to turn the light `'on'` or `'off'`, you might write:

```js
store.dispatch({Type:'toggle'});
store.dispatch({type:'toggel'});
store.dispatch({typo:'toggle'});
```

Did you spot the errors?

In most Redux applications, _action creators_ are used to reduce this repetition and to provide consistency. An action creator is simply a function that returns an action object with a `type` property. They are typically called and passed directly to the `store.dispatch()` method resulting in fewer errors and an easier-to-read dispatch statement. 

The above code could be rewritten using an action creator called `toggle()` like so:

```js
const toggle = () => {
  return { type: "toggle" };
}
store.dispatch(toggle()); // Toggles the light to 'off'
store.dispatch(toggle()); // Toggles the light back to 'on'
store.dispatch(toggle()); // Toggles the light back to 'off'
```

Though not necessary in a Redux application, action creators save us the time needed to type out the entire action object, reduce the chances you make a typo, and improve the readability of our application.

Often, before the reducer of an application is even written, Redux programmers will write action creators as a way of planning out which actions will be available to dispatch to the store.

Action Creators

As you saw in the last exercise, Redux can be used within the context of any UI framework, though it is most commonly paired with React. This makes sense considering that React and Redux were both developed by [engineers at Facebook](https://en.wikipedia.org/wiki/Redux_(JavaScript_library)#History).

We can be more specific about the common steps involved in connecting Redux to a React UI:
* A `render()` function will be subscribed to the `store` to re-render the top-level React Component.
* The top-level React component will receive the current value of `store.getState()` as a `prop` and use that data to render the UI.
* Event listeners attached to React components will dispatch actions to the `store`.

Take a look at **store.js** in the code editor. Here, you can see the completed light switch application following this pattern.
* The `render()` function is subscribed to the `store`.
* `store.getState()` is passed as a `prop` called `state` to the `<LightSwitch />` component. 
* The `LightSwitch` component displays the current state of the store, either `'on'` or `'off'`, and adjusts the background colors accordingly. 
* The `LightSwitch` component declares a click handler that dispatches a `toggle()` action to the `store`.

>_Note 1: The prop name `state` isn't a special React name and can be customized as the programmer sees fit. For example, `lightSwitchState={store.getState()}` would also be valid._