Learn the concepts underlying all Redux applications, including reducers, state, actions, and the store.

Core Concepts in Redux

So far we have covered state, actions, reducers, and how they participate in the one-way data flow. Where does all of this take place? 

Redux uses a special object called the **store**. The store serves as a container for the state, and it is the centerpiece of your application and the single source of truth. The store is in charge of facilitating the dispatching of actions, and triggering the reducer when actions are dispatched. In most Redux applications, there is typically only one store.

Let's rephrase the data flow using the new term:
1. The store initializes the state with a default value.
2. The view displays that state to the user.
3. When a user interacts with the view, such as clicking a button, an action is dispatched to the store.
4. The store's reducer combines the dispatched action and the current state to determine the next state.
5. The view is updated to display the new state.

While we won't be writing any code for the store during this lesson, it is essential that you understand the state, actions, reducers, and their role in the one-way data flow.

Store

In most applications, there are three parts:
* State – the current data used in the app
* View – the user interface displayed to users
* Actions – events that a user can take to change the state

The flow of information would go like this:

* The state holds the current data used by the app's components.
* The view components display that state data.
* When a user interacts with the view, like clicking a button, the state will be updated in some way.
* The view is updated to display the new state.

With plain React, these three parts overlap quite a bit. Components not only render the user interface, but they also may manage their own state. When actions that may change the state occur, components need to directly communicate these changes to each other. 

Redux helps separate the state, the view, and actions by requiring that the state be managed by a single source. Requests to change the state are sent to this single source by view components in the form of an action. Any components of the view that would be affected by these changes are informed by this single source. By imposing this structure, Redux makes our code more readable, reliable, and maintainable.

Circular diagram with three nodes: Actions points to State. State points to View. View points to Actions.

One-Way Data Flow

In the previous exercise, we wrote reducers that returned a new copy of the state rather than editing it directly. We did this to adhere to the [rules of reducers provided by the Redux documentation](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#rules-of-reducers):
1. They should only calculate the new state value based on the `state` and `action` arguments.
2. They are not allowed to modify the existing state. Instead, they must copy the existing state and make changes to the copied values.
3. They must not do any asynchronous logic or have other "side effects".

By asynchronous logic or "side effects", we mean anything that the function does aside from returning a value, e.g., logging to the console, saving a file, setting a timer, making an HTTP request, and generating random numbers. 

By adhering to these rules, Redux promotes a clean separation of concerns, improves the maintainability of the codebase, and allows for efficient debugging and testing. 

Rules of Reducers

_State_ in a web application represents the current information that drives the application's behavior and appearance. It acts as a centralized source of data, storing the essential details of the application at any given moment.

For example, in a calendar application, the state would include events (name, date, label), the current timezone, and display filters. In a to-do app, the state would consist of to-do items (description, completed/not completed), the existing order of the items, and display filters. In a Word editor, the state would encompass the contents of the document, print settings, and comments.

Complex apps have a multitude of states to keep track of, and passing states down the component tree can become tedious and inefficient. Redux, as a valuable tool, enhances JavaScript frameworks and libraries by offering a consistent and predictable solution for state management.

With Redux, the state can be any JavaScript type, including number, string,  boolean, array, and object.

Here's an example state for a to-do app:

```js
const state = [ 'Print trail map', 'Pack snacks', 'Summit the mountain' ];
```

Each piece of information in this state—an array in this case-would inform some part of the user interface. 

State

Congratulations! In this lesson, you've built a strong conceptual foundation of Redux and built a state object, some actions, and a reducer along the way. Here's what else you learned: 
* Redux is a library for managing and updating application state based on the Flux architecture
* Redux makes code more predictable, testable, and maintainable by consolidating state in a single object. Components are just given data to render and can request changes using events called actions.
* In a Redux application, _data flows in one direction_: from state to view to action back to state, and so on. 
* _State_ is the current information behind a web application. 
* An _action_ is an object describing an event in the application. It must have a `type` property and it typically has a `payload` property as well.
* A _reducer_ is a function that determines the application's next state given a current state and a specific action. It returns a default initial state if none is provided and returns the current state if the action is not recognized
* A reducer must follow these three rules: 
    1. They should only calculate the new state value based on the existing state and action.
    2. They are not allowed to modify the existing state. Instead, they must copy the existing state and make changes to the copied values.
    3. They must not do any asynchronous logic or other "side effects".

* In other words, a reducer must be a _pure_ function, and it must update the state _immutably_.
* The _store_ is a container for state, it provides a way to dispatch actions, and it calls the reducer when actions are dispatched. Typically there is only one store in a Redux application.

User interface receives click event. Event is handled by event handler. Event handler dispatches an action. Action and current state are received by reducer. Reducer produces new state. User interface updates to show new state.

Review

So far, we've defined the state of our application and the actions representing requests to change that state, but we haven't seen how these changes are carried out in JavaScript. The answer is a reducer.

A **reducer**, or reducer function, is a plain JavaScript function that defines how the current state and an action are used in combination to create the new state.

Here's an example of a reducer function for a todo app:

```js
const initialState = [ 'Print trail map', 'Pack snacks', 'Summit the mountain' ];

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'todos/addTodo': {
      return [ ...state, action.payload];
    }
    case 'todos/removeAll': {
      return [];
    }
    default: {
      return state;
    }
  }
}
```

There are a few things about this reducer that are true for all reducers:
* It's a plain JavaScript function
* It defines the application's next state given a current state and a specific action
* It returns a default initial state if no action is provided
* It returns the current state if the action is not recognized

There are two intermediate JavaScript syntaxes used here:
1. We use the equals sign `=` to [supply a default value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) for the `state` parameter.
2. We use [the spread operator (`...`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to copy the current state and any changed values into a new object, not the existing `state` argument. We'll explain why in the next exercise.

Reducers

In programming, the three rules of reducers in Redux can be described more broadly. These rules state that reducers must perform **immutable** updates and be **pure functions**.

When a function makes immutable updates to its arguments, it doesn't directly modify the original argument. Instead, it creates a copy and modifies that copy. This process is referred to as _immutable_ updating because the function doesn't alter or _mutate_ the original arguments.

This function mutates its argument:

```js
const mutableUpdater = (obj) => {
  obj.completed = !obj.completed;
  return obj;
}

const task = { text: 'do dishes', completed: false };
const updatedTask = mutableUpdater(task);
console.log(updatedTask); 
// Prints { text: 'do dishes', completed: true };

console.log(task); 
// Prints { text: 'do dishes', completed: true };
```

Meanwhile, this function "immutably updates" its argument:

```js
const immutableUpdater = (obj) => {
  return {
    ...obj,
    completed: !obj.completed
  }
}

const task = { text: 'iron clothes', completed: false };
const updatedTask = immutableUpdater(task);
console.log(updatedTask); 
// Prints { text: 'iron clothes', completed: true };

console.log(task); 
// Prints { text: 'iron clothes', completed: false };
```

By copying the contents of the argument `obj` into a new object (`{...obj}`) and updating the `completed` property of the copy, the argument `obj` will remain unchanged.

Note that plain strings, numbers, and booleans are immutable in JavaScript, so we can just return them without making a copy:

```js
const immutator = (num) => num + 1;
const x = 5;
const updatedX = immutator(x);

console.log(x, updatedX); // Prints 5, 6
```

If a function is _pure_, then it will always have the same outputs given the same inputs. 

This is a combination of rules 1 and 3:
* Reducers should only calculate the new state value based on the state and action arguments.
* Reducers must not do any asynchronous logic or other "side effects".

In this example, the function is not a pure function because its returned value depends on the status of a remote endpoint.

```js
const addItemToList = (list) => {
  let item;
  fetch('https://anything.com/endpoint')
    .then(response => {
      if (!response.ok) {
        item = {};
      }
      
      item = response.json();
   });

   return [...list, item];  
};
```

The function can be made pure by pulling the `fetch()` statement outside of the function.

```js
let item;
  fetch('https://anything.com/endpoint')
    .then(response => {
      if (!response.ok) {
        item = {};
      }
      
      item = response.json();
   });

const addItemToList = (list, item) => {
    return [...list, item];
};
```

Immutable Updates and Pure Functions

Most well-designed applications will have separate components that need to communicate and share data. 

A to-do list might have an input field where the user can type in a new to-do item. The application might transfer this data from the input field, add it to an array of all to-dos, and render them as text on the screen. This entire interaction can be defined as an **action**. Actions describe an event or an action that has occurred and provide information about what needs to be updated in the application's state. In short, actions are how Redux manages and update the state. 

In Redux, actions are represented as plain JS objects. Here's what that action might look like:

```js
const action = {
  type: 'todos/addTodo',
  payload: 'Take selfies'
};
```

* Every action must have a `type` property with a string value. This describes the action. 
* Typically, an action has a `payload` property with an object value. This includes any information related to the action. In this case, the payload is the to-do text.
* When an action is generated and notifies other parts of the application, we say that the action is _dispatched_.

Here are two more example actions:

"Remove all to-dos". This requires no `payload` because no additional information is needed:

```js
const action = {
  type: 'todos/removeAll'
}
```

"Remove the 'Pack snacks' to-do":

```js
const action = {
  type: 'todos/removeTodo',
  payload: 'Pack snacks'
}
```

Actions

Imagine you are creating a calendar app with various functionalities. One part of the app displays events; another lets users filter which types of events are shown, a third part of the app sets the current time zone, and a fourth part creates new events. To make these functionalities possible, you'd have to manage shared data and updates across these components. Without proper management, the complexity of these tasks can quickly escalate.

That's where [Redux](https://redux.js.org/) comes in. Redux is a state management library that follows a pattern known as the [Flux architecture](https://facebookarchive.github.io/flux/docs/in-depth-overview/).  In Flux and Redux, shared information is consolidated within a single object instead of being scattered across individual components. Components receive data to render and can request changes using actions, which are events triggered by user interactions or other events. The state is available throughout the application, and updates are handled in a predictable manner, with components being notified whenever a change occurs.

To put it another way, [here's the description from the Redux documentation](https://redux.js.org/tutorials/fundamentals/part-1-overview#why-should-i-use-redux): "The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected."

There are similar tools like [Recoil](https://recoiljs.org/), [MobX](https://mobx.js.org/README.html), and [Apollo Client](https://www.apollographql.com/docs/react/), but Redux is the tried-and-true tool for state management in React applications. It's more popular in the developer community and well-supported with documentation and online tutorials.

This lesson will cover the core concepts of Redux: how Redux works and the basic terminology used to describe a Redux app. It assumes you know JavaScript functions, arrays, and objects. If you need to review these, check out the corresponding units in [our Learn JavaScript course](https://www.codecademy.com/learn/introduction-to-javascript).


Calendar application with home, travel, and work filters. The two calendar events are Pizza Night and Ask for a raise. Code snippet shows a JavaScript object representing the underlying information.