1. Introduction to Redux Header Eric W. Greene Microsoft Virtual Academy
Produced by

2. Course Overview Why Redux? Three Principles of Redux
Essential JavaScript Concepts
Reducer Functions
Working with Stores
Combining Reducers
Integration with React and Asynchronous Operations

3. Why Redux?
Managing state in JavaScript applications is very challenging
Redux employs a predictable state container to simplify state management
Execution of an application is an initial state followed by a series of actions

4. Why Redux?
Each action reduces the state to a new predictable state, to which the application user interface transitions
A state container, known as store, contains the reduction logic implemented as pure functions as well as the last reduced (current) state

5. Three Principles of Redux
To enable state changes to be predictable, the following constraints applied to state changes
Single Source of Truth
State is Read-Only
Changes are made with Pure Functions

6. Single Source of Truth
Following the pattern of Flux, all data flows through a Redux system in a unidirectional matter
All changes to the state comes from actions applied to the state, and all actions are funneled into Redux
No part of the system can ever receive data from two sources
Additionally, the state managed by Redux is the state of the whole application (with minor exceptions, such as form control entry)

7. State is Read-Only State can never be mutated
New states are produced by applying an action to the current state (known as reduction) from which a new state object is produced
Immutable programming techniques need to be utilized

8. Changes are made with Pure Functions
Pure functions accept inputs, and using only those inputs produce a single output
The function produces no side effects
Many pure functions can be composed together to process different parts of the state tree

9. Definition of Redux
From the Redux website, "Redux is a predictable state container for JavaScript apps."
Predictable – state changes follow the three principles
State – the application's data, including data related to the UI itself
Container – Redux is the container which applies actions to the pure reducer functions to return a new state
Redux has been designed for JavaScript applications

10. Differences from Flux
While Redux and Flux share similar concepts and principles, there are some differences
Flux differentiates between the dispatcher and store, this is because Flux supports multiple stores
Redux limits the application to one store which means the store and dispatcher can be combined into one dispatcher-store
This dispatcher-store is created by Redux's createStore function

11. Development Environment
Visual Studio Code + Google Chrome – using the Chrome extension for Visual Studio Code, in editor debugging of TypeScript code will be available
REST Server provided by json-server, Web Server provided by browser- sync
TypeScript is used for module support and strong-typing

12. Development Environment
Dynamic Module Loading with SystemJS
ES2015 code is not transpiled to ES5.1, it will run as ES2015 natively
Node.js powers the development tooling

13. Setup Development Environment

14. Essential JavaScript and Web Browser API Concepts
Object.assign
Immutable Array Functions
Function Parameter Default Values
Arrow Functions
Destructuring, Spread Operator, and Rest Operator
Fetch & Promises
ES2015 Modules

15. Essential JavaScript Concepts
Object.assign – used to copy properties from one object to another
Immutable Array Functions – produce a new array instead of mutating an existing array
Function Parameter Default Values – used to initialize state when the application loads
Arrow Functions – commonly used when lexical this or a simpler syntax is desired

16. Essential JavaScript Concepts
Destructuring, Spreads, and Rest – makes working with properties easier
Fetch & Promises – Fetch is the new API for making REST service calls instead of libraries such as jQuery or using the XHR object directly
Fetch is not a standard, but hopefully will be soon
Promises are an ES2015 standard with wide support

17. Essential JavaScript Concepts
ES2015 Modules – Not supported natively, but TypeScript will transpile to UMD modules to be loaded by SystemJS
Eventually, ES2015 modules (static and dynamic – through SystemJS) should be available natively

18. Essential JavaScript Concepts

19. Reducer Functions
Follows the pattern of the reduce function available on the Array prototype in JavaScript
Receives the current state and an action, the function produces a new state based upon the type of action, and its associated data
Pure function – output results from inputs only, no side-effects
Should be configured to create an initial state during the first run

20. Reducer Functions

21. Working with Stores
Stores are the container for applying the action to the state using the reducer function, and they contain the current state
Created with the createStore function
The first parameter is the reducer function
The second parameter is an optional initial state, if this is not provided the default state initialized by the reducer function will be used on the first run-through

22. Store Initialization
When a store is created, the reducer function is executed with no action allowing the default parameter value and the reducer functions to initialize the application state
If an initial state is passed into the createStore function, the initial state is passed in when the store is created

23. Handling Actions with the Store
Actions are sent to the store using the dispatch function
The dispatch function accepts the action object as an argument
The action object must have a type property to identify what the action is, additional properties with other relevant data may be specified as well

24. Distributing the New State
To distribute the new state produced from a dispatched action, a publisher/subscriber model is used through a subscribe function available on the store
When actions are dispatched, they are processed by the reducer producing a new state, then all of the subscriber functions are invoked so they can process the new state
The new state is retrieved in the subscriber function through the getState function on the store

25. Working with Stores

26. Combining Reducers
The state tree for an application can grow quickly especially when considering the first principle of Redux which is the entire state of the application is stored in one object
Writing a single reducer function for the whole state tree results in a long, bloated and difficult to maintain function

27. Combining Reducers
Commonly, reducer functions will be divided into multiple reducer functions with each function being responsible for one branch of the state tree
Redux provides a combineReducers function to combine these multiple reducer functions into a single function for the store

28. Combining Reducers

29. Integration with React and Asynchronous Programming
Redux works great with React, but Redux is not limited to only working React
Nevertheless, the React/Redux combination is so popular there are special libraries for tying the two together and there are lots of resources online which explore this common combination of libraries
Asynchronous programming introduces additional complexities to managing state

30. Integration with React
This course will not focus on the react-redux available here:
Instead, this course will connect Redux into React using appropriate coding patterns
The store will be passed in as property to the top level state component of the React UI
React component lifecycle functions will be used to interact with the store's functionality

31. Asynchronous Programming
Asynchronous Redux programming appears difficult at first, but really its quite easy
The key is to understand how state and asynchronous operations work together
Asynchronous operations have two states:
Pending Request State
Fulfilled Request State

32. Integration with React and Asynchronous Operations

33. Conclusion
Redux, inspired by Flux, improves the management of state in JavaScript applications
Its built on three principles: single source of truth, immutable state, and pure reducer functions
Redux provides the container for applying the actions to produce new states based upon the logic of the reducer functions
Reducer functions can work on different parts of the state tree and be combined together