Microcosm simplifies state management for React apps

Viget Labs has published a data layer for Facebook’s popular React JavaScript UI library. Called Microcosm, the open source tool manages state and data flow for React applications, keeping track of user actions even when users switch context or lose connectivity.

Formally introduced to the public this month, Microcosm reduces the need for boilerplate code and keeps React apps organized. The company has described Microcosm as being an evolution of Facebook’s Flux application architecture for client-side web applications. Viget has been running Microcosm in production itself for two years.

With Microcosm, large projects can be split into manageable chunks. Microcosm can track application data, schedule work, and load states out of the data layer. Microcosm aims to be a “batteries-included” Flux, said Viget senior developer and Microcosm creator Nate Hunzaker. “We hope to avoid the decision paralysis that can occur when a tool exposes a large variety of choice,” Hunzaker added. “We want to provide a solution that helps developers to hit the ground running, focusing more on building their project, rather than their configuration.”

Key to Microcosm is the concept of actions, a general abstraction for performing a job. With actions, jobs are queued to calculate new application state. Actions can process a variety of data types and move through a lifecycle that includes open, update, reject, and cancel. React components can subscribe to the progress of an action without impacting the data layer.

Also featured in Microcosm are domains, which define rules for turning actions into new state. Domains are similar to stores in Flux or reducers in the Redux JavaScript application state container. Effects, meanwhile, provide an outlet for side effects after domains update state.

Microcosm also has a forking feature, called Presenters, which essentially create an app within an app. Presenters create new repos that receive state from an “upstream” Microcosm while adding data processing of their own. This works well for large applications where you want to avoid imposing complicated state management on an entire system, Hunzaker explained.

Viget’s roadmap for Microcosm includes plans to build development tools to work with it and to add support for additional frameworks such as Preact, Vue, and Glimmer. Viget has published a guide on getting started with Microcosm.