Redux
Details about our integration with redux can be found here. Below is a brief overview of the content in this page.
Redux is a global state management library. Traditionally, in React, data is passed from top down. If we want to know about the data about the logged in User, our top-level component should fetch the information and pass it down the component hierarchy. While this works, it is relatively clunky. Redux creates a global state variable that any component can read from and add to.
Peoplepower uses Redux as a sort of local cache. We download the user data once on app load and then we read from the redux store (cache) every time we need information. Asking for information from Redux is very straightforward, and works like a subscription. A component can describe what data it wants from Redux and that data will be passed in as a prop. Any time the data updates, the component will receive a new prop, just like it would with a normal prop.
One can change the redux store by dispatching an action, which is like a predefined way to change data in Redux. You won't find this in our code too often, as it is only done in app load and log out.
There is detailed information about how Redux works on the Redux Docs. We also use (Redux Toolkit)[https://redux-toolkit.js.org/] to dramatically simplify our Redux integration.