State management

Simplify application state management

Anything beyond a non-trivial application with two or more layers of components requires a predictable state management solution to reduce bugs and improve development time. Syntapse offers detailed understanding and first hand experience of the concepts, problems and solutions surrounding state management of complex applications. Robust solutions with integrations for client and server frameworks already exist and can be integrated into your projects to bring your state management back under control. Frameworks have evolved rapidly in recent years and Syntapse can offer support and migration for legacy solutions as well as propose bleeding edge options for greenfield projects.

What is program state?

Image result for iceberg tip

Program state is the sum total of all variables and values at any particular point in a program. As systems become increasingly complex the state relationships between entities become increasingly complex

Why manage state?

Image result for molecular

React and Angular are built with a way for components to internally manage their state without any need for an external library or tool. In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component. So sharing data among sibling components becomes difficult.

Syntapse state management

postit note

We provide generic reactive flux pattern implementations in any our supported languages and frameworks including Angular, React and Express. If you require an implementation on an alternative platform please contact us for further information

Predictable state management solutions

State management makes for better, reliable, and coherent applications.

If you have pre-existing solution requirements or need to integrate with legacy systems please contact us for further discussion.

This is a very simple example of a todo app using React hooks - useContext and useReducer

React hooks for context and reducer provides similar functionality to Redux with a lot less boilerplate

There are four central concepts: actions, action creators, store and reducers.

Actions are events. They are the only way you can send data from your application to your Redux store. The data can be from user interactions, API calls, or even form submission.

Action creators are functions that returns an action object. Action creators can seem like a superfluous step, but they make things more portable and easy to test. The action object returned from an action creator is sent to all of the different reducers in the app.

Reducers are pure functions that take the current state of an application, perform an action and returns a new state. These states are stored as objects and they specify how the state of an application changes in response to an action sent to the store.

A Redux application has a single store. which has several duties:

  • Allow access to state via getState().
  • Allow state to be updated via dispatch(action).
  • Holds the whole application state.
  • Registers listeners using subscribe(listener).
  • Unregisters listeners via the function returned by subscribe(listener).

Following is a classic todo app re-written using React Redux. 

What is NgRx?

NgRx is a framework for building reactive applications in Angular. NgRx provides state management, isolation of side effects, entity collection management, router bindings, code generation, and developer tools that enhance developers experience when building many different types of applications.

Core Principles

  • State is a single, immutable data structure.
  • Components delegate responsibilities to side effects, which are handled in isolation.
  • Type-safety is promoted throughout the architecture with reliance on TypeScript's compiler for program correctness.
  • Actions and state are serializable to ensure state is predictably stored, rehydrated, and replayed.
  • Promotes the use of functional programming when building reactive applications.
  • Provide straightforward testing strategies for validation of functionality.


  • Store - RxJS powered state management for Angular apps, inspired by Redux.
  • Store Devtools - Instrumentation for @ngrx/store enabling time-travel debugging.
  • Effects - Side effect model for @ngrx/store.
  • Router Store - Bindings to connect the Angular Router to @ngrx/store.
  • Entity - Entity State adapter for managing record collections.
  • Schematics - Scaffolding library for Angular applications using NgRx libraries.

Read more about ngrx here

What is NGXS?

NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations. NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators.

NGXS tries to make things as simple and accessible as possible. There can be a lot of boilerplate code in state management, thus a main goal of NGXS is to reduce boilerplate allowing you to do more things with less. It is also not necessary to be super familiar with RxJs.

RxJs is great and is made use of heavily internally within the project, but the library tries to do as much for you as it can. NGXS drives to let users take advantage of the benefits of Observables but in many cases treat them as an implementation detail of the library rather than a prerequisite.

There are 4 major concepts to NGXS:

  • Store: Global state container, action dispatcher and selector
  • Actions: Class describing the action to take and its associated metadata
  • State: Class definition of the state
  • Selects: State slice selectors

Read more about ngxs

Angular observable services.

Angular is a complete framework and and provides flexible state management on its own through its service and dependency injection framework - by combining RXJS Observables with Services. Services can be injected throughout the application to provide an effective shared state management solution.

Dependency injection is wired into the Angular framework and used everywhere to provide new components with the services or other things they need. Components consume services which are injected into a component, giving the component access to that service class. This is a default feature with no additional libraries required.

An observable data service is an Angular injectable service that can be used to provide data to multiple parts of the application. The service, that can be named a store can be injected in any place where the data is needed:

This method does leave scope for scattered and hard to track state implementations but observable services are certainly an improvement over no state management. For large applications with complex component hierarchies, tracing and managing state may become difficult and a single state solution provided by redux may be preferable. 

Handling Asynchronous State updates

In a real-world application updating state is asynchronous in nature. We offer scaleable state management solutions using open standards patterns in Angular, React and Vue. The Redux adapters are available to all, and each offers greater efficiencies with platform specific solutions.

Explore how Syntapse can assist your business and software development. Contact us for further assistance or general enquiries.

We can offer a range of services from half day consultancy, assessment reports, and troubleshooting to long term greenfield project involvement

As your technology partners we are happy to hear from schools and local authorities, communities and charities, engineers and scientists, startups and institutions