Redux in ReactJS

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