Redux + LWC

For predictable, centralized, and

flexible application state
Jean-Paul Antona
Software Engineering LMTS LOGO

Einstein Core Apps

Sky Chen
Software Engineering PMTS LOGO

Einstein Core Apps

Thank You
Trail Map

Why Redux?
• Predictable. Centralized. Debuggable. Flexible.
LWC + Redux
• To Do List app
Redux Chrome Dev Tools
• Time-travel debugging and state visualization
About Einstein Unified UI
• Combining ML state with UI extensibility
Why Redux?
Predictable.
Centralized.
Debuggable.
Flexible.

Image Source: https://redux.js.org/

What problem does Redux solve?
Complex component communication

Producer Producer Producer Producer Producer Producer

Consumer Consumer Consumer Consumer Consumer Consumer

Producer Producer Producer Producer Producer Producer

Redux
Store

Consumer Consumer Consumer Consumer Consumer Consumer

Image Source: https://medium.com/@tkssharma/understanding-redux-react-in-easiest-way-part-1-81f3209fc0e5

What is Redux?
A combination of the Command and the Observable patterns

Image Source: http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9

 Redux+LWC for symmetry to React/Angular
Redux gives LWC parity to React/Angular

Image Source:
https://scriptverse.academy/tutorials/reactjs-redux-example.html

Image Source:
https://medium.com/@sameedhkhan/state-management-with-redux-in-lwc-545086a6732
Image Source:
https://digital55.com/como-aplicar-patron-redux-angular/
 Steps to create new LWC Components
connected with the Redux Store
1. Create new Action Types constants
2. Create the Action Creators functions, which will
dispatch the Action Type
LWC + 3. Create the reducers to handle the action, and
create new state in the Redux Store
Redux 4. Create the selectors to extract the attributes from
Connect LWC the Redux state
components with 5. Create the LWC component that extends the
the Redux store lwcBinding component
6. If the LWC component updates the Redux state,
import the Actions created in step 3, and just call
the actions in the event handler of the component.
A To Do List App
A simple example of a Redux integration with LWC

Video Source: https://github.com/antonajp/LWC-Integrates-Redux-demo-videos

VS Code Project + Git Repo
Lightning Web Components

Web Source: https://github.com/antonajp/LWC-Integrates-Redux

Video Source: https://github.com/antonajp/LWC-Integrates-Redux-demo-videos

Actions
Describe how the store should be updated
• Actions require a type, which is used by reducers to only update properties for specific actions.
Other properties can be included in the action to pass any relevant data to the store.

Add Item

Toggle Item
Action Creators
Create the Action Creators, which will dispatch the Action Type

Add Item

Toggle Item
Reducers
Update the state of the store
• A reducer takes two arguments, the current state and the action that has been dispatched. The
current state is manipulated and returns a new state based on the action.

Video Source: https://github.com/antonajp/LWC-Integrates-Redux-demo-videos

Selectors
Create the selectors to extract the attributes from the Redux state
Store
An application-wide singleton service
• A store is created by passing it a reducer function. It can also take an optional initialState value
and an enhancer function.
• createStore(reducer, initialState, enhancer)

Video Source: https://github.com/antonajp/LWC-Integrates-Redux-demo-videos

LWC Binding Component
Handles the subscribe and unsubscribe to the Redux store

Video Source: https://github.com/antonajp/LWC-Integrates-Redux-demo-videos

Redux Dev
Tools
Chrome
Redux Chrome Dev Tools
Developer Tooling for Observability
Redux Chrome Dev Tools
Time Travel Debugging
Einstein
Unified UI
Related sessions
Day 1
● What’s New with Lightning Web Components [11:30 AM, Pine Theater]
● Build Web Apps with the Lightning Web Runtime [1:30 PM, Breakout 1]
● Best Practices for Lightning Web Components in 2022 [2:30 PM, Breakout 3]
● How to Unlock Native Device Capabilities in LWC [3:30 PM, Breakout 3]

Day 2
● Working with Browsers and Web Standards to Evolve LWC [10:30 AM, Pine Theater]
● Lightning Web Security: Unlock the Power of LWC [10:30 AM, AppExchange Campfire]
● Streamline UI testing with UTAM [12:30 PM, Pine Theater]
● Building Lightning Web Components for Experience Cloud’s LWR [12:30 PM, Breakout 1]
● Integrate Redux with Lightning Web Components to Manage State [1:30 PM, Platform Theater]
RAD Women needs your help!

radwomen.org/be-a-part-
of-radwomen/
@radwomencode
How did we do?
Session Survey
● Please complete a session survey
● Located in the mobile app under
the session title
Thank You
LWC Communication
Child-to-parent communication
LWC Communication
Parent-to-child communication

Image Source:https://trailhead.salesforce.com/content/learn/projects/communicate-between-lightning-web-components/communicate-from-child-to-parent
LWC Communication
Unrelated component communication

Image Source:
https://trailhead.salesforce.com/content/learn/projects/communicate-between-lightning-web-components/communicate-betw
een-unrelated-components