Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading content…
Transcript

State Management Library

Intro to Redux

State Management in AngularJS

State Management In AngularJS

$broadcasting

1. Updating current view through $broadcasting

UI Routing

Limitation

Limitation

1. To react to a change also requires a dependency on $scope.

2. I now have to understand how custom events work and use their convention correctly (notice, for example, the new value is in the second parameter, not the first).

3. Long URL and insecure

Alternative Approach

1. Using service and controller to expose shared data as an object

Alternative Approach

Redux Way

Redux 101

Core Concept

1. State is just an immutable object. This is so that different parts of the code can’t change the state arbitrarily, causing hard-to-reproduce bugs.

2. Action is plain Javascript object that describe what happened.

3. Reducer is a function that takes state and action as arguments, and returns the next state of the app.

Three Principles

1. The state of your whole application is stored in an object tree within a single store.

2. The only way to change the state is to emit an action, an object describing what happened.

3. Any changes are made with a pure function (reducer) that can contains multiple small functions

The Store

Action

Reducer

Data Flow

1. You call store.dispatch(action).

2. The Redux store calls the reducer function you gave it.

3. The root reducer may combine the output of multiple reducers into a single state tree.

4. The Redux store saves the complete state tree returned by the root reducer.

First Step

The view requests an action. The action creator formats it and returns it.

First Step

View ==> Action Creators

View ==> Action Creators

Dispatch Action

The action is either dispatched automatically(bindActionCreators()), or the view dispatches the action.

Dispatch Action

Store receives new state

The store receives the action. It sends the current state tree and the action to the root reducer.

Store receives new state

Passing to subreducers

The root reducer cuts apart the state tree into slices. Then it passes each slice to the subreducer that knows how to deal with it.

Passing to subreducers

Return to root reducer

The subreducer copies the slice and makes changes to the copy. It returns the copy of the slice to the root reducer.

Return to root reducer

Update the Store

Once all of the subreducers have returned their slice copies, the root reducer pastes all of them together to form the whole updated state tree, which it returns to the store. The store replaces the old state tree with the new one.

Update the Store

Update the view

The store tells the view layer binding that there’s new state. The view layer binding triggers a rerender.

Update the view

Usage with React

Use a special React Redux component called <Provider> to magically make the store available to all container components in the application without passing it explicitly. You only need to use it once when you render the root component

Passing the Store

They describe the look but don't know where the data comes from, or how to change it. They only render what's given to them.

Designing Presentational Components

container components connect the presentational components to Redux

Designing Container Components

Useful Resource

1. Morden React with Redux by Stephen Grinder (https://www.udemy.com/react-redux/learn/v4/overview)

2. Getting started with Redux by Dan Abramov (https://egghead.io/courses/getting-started-with-redux)

3.https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

Learn more about creating dynamic, engaging presentations with Prezi