Lesson 9 - Reactjs (VTI)

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)

Redux Core
 Flow
https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8
c3968371d9ef6f2a1486bd40a26.gif

Redux Core
 Example 1:
o Normal

Redux Core
View source code in Lesson_9_Resource

Redux Core
 Example 1:
o Redux
npm install redux

Redux Core
Get state from store

Redux Core
Binding global state to local state in component

🡺 Re-render when global state in store changing

Testing System Assignment
 Self-practice

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

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

Redux Core
Components

Redux Core

 Self-practice

Redux Core
 Components
o Store
o Action
o Reducer
o Action Creators
o Selectors
https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8
c3968371d9ef6f2a1486bd40a26.gif

Redux Core
 Example 3: Multiple reducer

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)

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

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

Summary
 Reducer (function)
o 2 types
▪ Root Reducer
▪ Child Reducer

Summary
 Action Creators (function)
o Create and return action object

Summary
 Selectors (function)
o Extract information from Global State in Store

Summary
 API
o createStore()
o combineReducers()
o store.getState()
o store.dispatch()
o store.subscribe()

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

React Redux
 Example:
Structure Provide Store for entire <App>
npm install react-redux

React Redux
mapStateToProps() mapDispatchToProps()

 Self-practice

React Redux
 Components
o Provider
o connect()
▪ mapStateToProps
▪ mapDispatchToProps

React Redux
 Provider
o Provide Store for entire <App>

React Redux
 connect()
o To connect a Component to the Redux Store
o Include:
▪ mapStateToProps (optional)
▪ mapDispatchToProps (optional) Closure - HOF

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

React Redux
 Example 1: Global State
Redux Core React Redux

mapStateToProps () is similar to the Selector in Redux Core

React Redux
 Example 2: Global State & props

React Redux
 mapDispatchToProps (optional)
o Mapping the Dispatch (functions in Store) into the Component’s props.
o 2 ways:
▪ props.dispatch
▪ mapDispatchToProps() (recommended)

React Redux
 props.dispatch

React Redux
 mapDispatchToProps()
o accept functions or objects
ownprops
Way 1: Function mapDispatchToProps()

React Redux
Way 2 (Recommended): Action Creator Object

React Redux
Way 2: function bindActionCreators()

Summary

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

React Hook
 Example:
Provide Store for entire <App>
Shorter than Redux Core

React Hook
Selector
Action creator

 Self-practice

React Hook
 Hook must be provided with Provider
 Hooks
o useSelector()
o useDispatch()
o useStore()

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

React Hook
 useSelector()
Redux Core

React Hook
 useSelector()
React Hook

React Hook
 useDispatch()
Redux Core React Redux

React Hook
 useStore() (rarely)

Testing System Assignments

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

Q&A
Copyright © VTI Academy All Rights Reserved

Lesson 9 - Reactjs (VTI)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 9 - Reactjs (VTI)

Uploaded by

Copyright:

Available Formats

WAY TO ENTERPRISE

Copyright © VTI Academy All Rights Reserved

 Can be used in React, Angular, Vue

 Very light (2kB)

Copyright © VTI Academy All Right Reserved

o Single Source of Truth

o Changes are made with functions (reducer)

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

View source code in Lesson_9_Resource

Copyright © VTI Academy All Right Reserved

npm install redux

Copyright © VTI Academy All Right Reserved

Get state from store

Copyright © VTI Academy All Right Reserved

Binding global state to local state in component

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

View source code in Lesson_9_Resource

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

 Example 3: Multiple reducer

View source code in Lesson_9_Resource

Copyright © VTI Academy All Right Reserved

o Store and manage state of the whole <App>

o There are methods to update state (via reducer)

Copyright © VTI Academy All Right Reserved

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

Attach data No data

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

 Action Creators (function)

o Create and return action object

Copyright © VTI Academy All Right Reserved

o Extract information from Global State in Store

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

o Using Global state when share data between multiple components

Copyright © VTI Academy All Right Reserved

Structure Provide Store for entire <App>

npm install react-redux

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

o Provide Store for entire <App>

Copyright © VTI Academy All Right Reserved

o To connect a Component to the Redux Store

▪ mapDispatchToProps (optional) Closure - HOF

Copyright © VTI Academy All Right Reserved

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

Copyright © VTI Academy All Right Reserved

Redux Core React Redux

Copyright © VTI Academy All Right Reserved

Copyright © VTI Academy All Right Reserved

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

Copyright © VTI Academy All Right Reserved