Scribd
Upload
24 views

Downloads - Introduction To Redux

The document provides an overview of Redux including why Redux is used, its core principles, essential JavaScript concepts, working with reducer functions, stores, combining reducers, and integrating Redux with React and asynchronous operations.

Uploaded by

Aicha Laa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views

Downloads - Introduction To Redux

The document provides an overview of Redux including why Redux is used, its core principles, essential JavaScript concepts, working with reducer functions, stores, combining reducers, and integrating Redux with React and asynchronous operations.

Uploaded by

Aicha Laa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

Header

Microsoft Virtual Academy

Introduction to Redux
Eric W. Greene

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

You might also like