State Management

Whilst the state is managed internally within the Formatic component, as it is directly exposed through the Data helper class, we detail its implementation below.

Overview

State is managed through various means to provide a persistent experience for the user. Local storage is used to store data that is to be persisted on page reload. Redux is used to internally share state between child and sibling components within the main Formatic component, whereas Apollo GraphQL is used to maintain state between our remote GraphQL server and local client.

Redux

The redux store is made available through the Data helper class:

// Get the current state of the redux store
const state = data.store.getState();

Within the store are two named attributes:

• formatic
• apollo

apollo is completely managed by the Apollo GraphQL package and should not be edited directly. To edit, see Apollo GraphQL.

formatic is completely maintained internally. Contains much of the information that is currently available through the Data helper.

Note

Whilst an instance of the redux store is made available through the Data helper, we strongly recommend against accessing it directly. Whilst the Data helper will follow SemVer guidelines, our internal data structure may change between releases.

Apollo GraphQL

Apollo GraphQL is used to maintain a consistent state between our remote GraphQL server and local client. You can access the Apollo Client through the Data helper class:

const apolloClient = data.client;

Note

We consider our GraphQL implementation completely internal, and thus the GraphQL schema is liable to change. For guaranteed backwards compatibility, you should use the Data helper in its place accessing properties.

Local storage

Local storage is used to persist data across page reload. Data stored in local storage include:

Submission ID

An alphanumeric ID that uniquely identifies the users active session. On render, the stored submission ID is retrieved and used to prepopulate the form with saved data, thus persisting the session across reload.