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

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

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

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

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

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)

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

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

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

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

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

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

Setup Development Environment

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

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

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

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

Essential JavaScript Concepts

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

Reducer Functions

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

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

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

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

Working with Stores

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

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

Combining Reducers

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

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

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

Integration with React and Asynchronous Operations

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