WAY TO ENTERPRISE

React JS

VTI ACADEMY
Author: duy.nguyenngoc1@vti.com.vn
March 2020
Agenda

❑ Redux Core
❑ React Redux
❑ Assignments

Copyright © VTI Academy All Rights Reserved

Redux
 Library

 Container that manages the Global State of the entire application through the Store (similar to Context)

 Can be used in React, Angular, Vue

 Very light (2kB)

Copyright © VTI Academy All Right Reserved

Redux
 Principles

o Single Source of Truth

o State is Read-only

o Changes are made with functions (reducer)

Copyright © VTI Academy All Right Reserved

Redux Core

 Flow

https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8
c3968371d9ef6f2a1486bd40a26.gif

Copyright © VTI Academy All Right Reserved

Redux Core

 Example 1:

o Normal

Copyright © VTI Academy All Right Reserved

Redux Core

View source code in Lesson_9_Resource

Copyright © VTI Academy All Right Reserved

Redux Core

 Example 1:

o Redux

npm install redux

Copyright © VTI Academy All Right Reserved

Redux Core

Get state from store

Copyright © VTI Academy All Right Reserved

Redux Core

Binding global state to local state in component

🡺 Re-render when global state in store changing

Copyright © VTI Academy All Right Reserved

Testing System Assignment

 Self-practice

Copyright © VTI Academy All Right Reserved

 Redux Core

 Example 2: Structuring

Structure
Usually create 1 Root Reducer containing Child Reducer
Each Child Reducer is responsible for changing an attribute in the state
Accessing state: state.todo.todos
Define action.type as constant

Copyright © VTI Academy All Right Reserved

 Redux Core

Create ActionCreator objects to return actions required for dispatch Creates Selector objects to return values which getted from store

Copyright © VTI Academy All Right Reserved

Redux Core

Components

Copyright © VTI Academy All Right Reserved

Redux Core

View source code in Lesson_9_Resource

Copyright © VTI Academy All Right Reserved

Testing System Assignment

 Self-practice

Copyright © VTI Academy All Right Reserved

Redux Core

 Components

o Store

o Action

o Reducer

o Action Creators

o Selectors

https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8
c3968371d9ef6f2a1486bd40a26.gif

Copyright © VTI Academy All Right Reserved

Redux Core

 Example 3: Multiple reducer

View source code in Lesson_9_Resource

Copyright © VTI Academy All Right Reserved

Summary

 Store (object)

o Store and manage state of the whole <App>

o There are methods to update state (via reducer)

o Available method

▪ store.getState()

▪ store.dispatch(action)

▪ store.subscribe(callback function)

Copyright © VTI Academy All Right Reserved

Summary

 Action (object)

o Component wants to change state on store must send action to Reducer

o Include:

▪ type (required)

▪ payload (optional)

Attach data No data

Copyright © VTI Academy All Right Reserved

Summary

 Reducer (function)

o The place to receive action and change the state in the store if needed

o Do not edit state directly 🡺 copy out a separate clone and edit

Copyright © VTI Academy All Right Reserved

Summary

 Reducer (function)

o 2 types

▪ Root Reducer

▪ Child Reducer

Copyright © VTI Academy All Right Reserved

Summary

 Action Creators (function)

o Create and return action object

Copyright © VTI Academy All Right Reserved

Summary

 Selectors (function)

o Extract information from Global State in Store

Copyright © VTI Academy All Right Reserved

Summary
 API

o createStore()

o combineReducers()

o store.getState()

o store.dispatch()

o store.subscribe()

Copyright © VTI Academy All Right Reserved

Summary
 Best practices

o Redux Store should only store Global State, React Component will store Local State

o Using Global state when share data between multiple components

Copyright © VTI Academy All Right Reserved

React Redux
 Example:

Structure Provide Store for entire <App>

npm install react-redux

Copyright © VTI Academy All Right Reserved

React Redux

mapStateToProps() mapDispatchToProps()

Copyright © VTI Academy All Right Reserved

Testing System Assignment

 Self-practice

Copyright © VTI Academy All Right Reserved

React Redux
 Components

o Provider

o connect()

▪ mapStateToProps

▪ mapDispatchToProps

Copyright © VTI Academy All Right Reserved

React Redux
 Provider

o Provide Store for entire <App>

Copyright © VTI Academy All Right Reserved

 React Redux

 connect()

o To connect a Component to the Redux Store

o Include:

▪ mapStateToProps (optional)

▪ mapDispatchToProps (optional) Closure - HOF

Copyright © VTI Academy All Right Reserved

React Redux

 mapStateToProps (optional)
o Mapping Global State into Component's props
o Called every time the Global State in the Store changes
o Automatically subscribe and re-render when the Global State in the store changes
state(required) và ownProps (optional)

Redux already implemented in the shouldComponentUpdate() method (shallow Compare)

⇨Using CreateSelector Toolkit for optimization

Copyright © VTI Academy All Right Reserved

React Redux
 Example 1: Global State

Redux Core React Redux

mapStateToProps () is similar to the Selector in Redux Core

Copyright © VTI Academy All Right Reserved

React Redux
 Example 2: Global State & props

Copyright © VTI Academy All Right Reserved

React Redux
 mapDispatchToProps (optional)

o Mapping the Dispatch (functions in Store) into the Component’s props.

o 2 ways:

▪ props.dispatch

▪ mapDispatchToProps() (recommended)

Copyright © VTI Academy All Right Reserved

React Redux
 props.dispatch

Copyright © VTI Academy All Right Reserved

React Redux
 mapDispatchToProps()

o accept functions or objects

ownprops

Way 1: Function mapDispatchToProps()

Copyright © VTI Academy All Right Reserved

React Redux
 mapDispatchToProps()

Way 2 (Recommended): Action Creator Object

Copyright © VTI Academy All Right Reserved

React Redux
 mapDispatchToProps()

Way 2: function bindActionCreators()

Copyright © VTI Academy All Right Reserved

Summary

Copyright © VTI Academy All Right Reserved

Other
 Custom context

https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context

 Multiple Stores

https://react-redux.js.org/using-react-redux/accessing-store#multiple-stores

Copyright © VTI Academy All Right Reserved

React Hook
 Example:

Provide Store for entire <App>

Shorter than Redux Core

Copyright © VTI Academy All Right Reserved

React Hook

Selector

Action creator

Copyright © VTI Academy All Right Reserved

Testing System Assignment

 Self-practice

Copyright © VTI Academy All Right Reserved

React Hook
 Hook must be provided with Provider

 Hooks

o useSelector()

o useDispatch()

o useStore()

Copyright © VTI Academy All Right Reserved

React Hook
 useSelector()

o Automatically subscribe when Global State is in store changing

o Using === operator for re-render checking

o Read more: https://react-redux.js.org/api/hooks#equality-comparisons-and-updates

⇨Using CreateSelector Toolkit for optimization

Copyright © VTI Academy All Right Reserved

React Hook
 useSelector()

Redux Core

Copyright © VTI Academy All Right Reserved

React Hook
 useSelector()

React Hook

Copyright © VTI Academy All Right Reserved

React Hook
 useDispatch()

Redux Core React Redux

Copyright © VTI Academy All Right Reserved

React Hook
 useStore() (rarely)

Copyright © VTI Academy All Right Reserved

Testing System Assignments

Copyright © VTI Academy All Right Reserved

Reference

⮚https://reactjs.org/docs/getting-started.html

⮚https://www.javatpoint.com/reactjs-tutorial

⮚https://www.udemy.com/course/react-the-complete-guide-incl-redux

Copyright © VTI Academy All Right Reserved

 Q&A

Copyright © VTI Academy All Rights Reserved