Wrapping up the series with a global state solution.
This article is part of the series starting with Exploring Salesforce Lightning Web Components: Part 1.
Borrowing from React Ecosystem
In the previous article we explored using the Salesforce provided pubsub solution. One of the challenges we observed is that it did not provide a global state solution; it is just a pub sub solution.
At the same time, in the world of React, this is an old problem with a defacto-standard solution:
— Redux — Redux
So, let us see how we can refactor the previous example with Redux. In this case, we are looking to have two sibling components, Child1 and Child2, share a common state:
We first update the parent component, HelloWorld:
- We also use the loaded flag to delay loading the child components until Redux is available
We next update the Child1 (and Child2) components to use Redux.
- Without fully understanding Redux, one can generally understand the flow of this solution as it is very similar to the previous pubsub example
- Notice that handleSubscribe is implemented as a property (arrow function) instead of a method; this pattern automatically binds the function to the class
The core of the Redux functionality is in the store lightning web component:
- The getStore function ensures that we have a singular store across all the components
- The rest of the implementation is straight-up Redux
With this implementation, the global state persists across tabs in a Salesforce application, e.g., all the tabs in Sales.
Interesting that through this 8 part series, we spent all of our time focusing on the general aspects of Lighting Web Components instead of the Salesforce-specific pieces; will leave that to you to learn.
On a side-note, I just happened to learn that Salesforce recently released an open-source version of Lightning Web Components. As a matter of fact, I was sufficiently intrigued that I wrote up another article on it.