Apollo

Apollo Client is a library written for React and it's a state management library which helps to manage local data and remote data via GraphQL. It provides automatic local caching and useful react hooks to execute queries and mutations towards the backend.

It has a very useful Chrome extension which helps to monitor the queries and the cache during development.

For more information about hooks head to their awesome documentation: Query, Mutation

Reactive Variables

As a state management tool it's very useful feature are the Reactive Variables. These variables can be used to store data globally that is available in every component. It also provides a hook that refreshes the component if the global state is changed.

This feature is used in the editor. Below the component structure of the editor page can be seen. It is just an example, every component might contain more children.

It is a tree like structure and it would be very cumbersome to Lift up the state to the root(LEDConfigEditorPage). And the root needs to know about the whole state since this is the only common ancestor of all the components so this is the only component that is able to put together everything to build the final effect descriptor.

This is where the reactive variables come in handy. All the child components update the same reactive variable and the root uses the useReactiveVariable hook to update the whole tree if some data changes.

Redux

Redux is honorable to mention here since it is the most popular state management tool that is used for React applications. However, Apollo has almost all the features as Redux and in addition it is able to handle GraphQL requests and deal with the local cache and it's a good idea to keep these things under the same ecosystem.