Redux

Overview

In Totara Mobile, Redux is used for managing and centralising the application state. With Redux, the state of the application is kept in a store, and each component can access any state that it needs from this store.

Redux works by having a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another. The main three building parts of redux are store, actions, and reducers. 

Store

The store is the place that holds the application state. The application should keep only one store. You can access the state stored, update the state via helper methods. In the Totara Mobile app the store is created in the @totara/store component.

const store = createStore(persistedReducer, createMiddleware(__DEV__));

The App uses redux-persist for persisting data. Further, it encrypts sensitive information using redux-persist-sensitive-storage. This uses the iOS keychain and Android shared preferences to store secure data in the device.

Actions

Actions are events that can send data from the application (user interactions, API calls, events) to the Redux store. Actions are plain objects with the properties of type to indicate the type of action and payload that contains the information of the action. To cause any change in the store, you need to dispatch an action first by using the store.dispatch() method. In Totara Mobile application actions are organized under the @totara/actions directory.

Reducers

Reducers take the previous state of the app and return a new state based on the action passed to it. These states are stored as objects, and specify how the state changes in response to an action sent to the store. In Totara Mobile reducers are placed in the @totara/reducers directory.