This document provides an overview of the Redux framework for managing state in JavaScript applications. It discusses key Redux concepts like single source of truth, immutable state, pure reducer functions, stores, actions, and combining reducers. It also covers integrating Redux with React and asynchronous operations. The document outlines the course content which will cover these Redux fundamentals and patterns for using Redux with React and asynchronous logic.

1. Header
Microsoft Virtual Academy
Introduction to Redux
Eric W. Greene
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:
https://github.com/reactjs/react-redux
 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