Introducing Elf — A Reactive Store with Magical Powers for JS Apps
State management is a challenge for every developer. Continuously keeping track of what has been updated, why, and when, can become a nightmare, especially in large applications. Elf was created to solve all of these issues painlessly.
Elf is a reactive immutable state management solution built on top of RxJS. It uses custom RxJS operators to query the state and pure functions to update it.
Elf encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for experienced and inexperienced developers alike.
Let’s get started by installing Elf. Elf provides many features, but for our purposes, we’ll install the core and entities packages:
👉 npm i @ngneat/elf @ngneat/elf-entitiesThe Store
The store takes an object that contains three properties — a state, a name, and config. To create the initial state used by your store call the createState() method. This method returns a state object and a config object. They are then used in the creation of the store:
The createState function can accept any number of features which describe the nature of the store. For example:
The features can be either one or more of the available features in Elf, or additional features you can create or add from other sources.
Querying the Store
A store is a BehaviorSubject. Therefore, we can subscribe to it to get its initial value and its subsequent values:
To select a slice from the store, we can use the select operator:
The select() operator returns an observable that calls distinctUntilChanged() internally, meaning it will only fire when the state changes, i.e., when there is a new reference to the selected state.
Updating the Store
To update the store, we can use the update method which receives a callback function, which gets the current state, and returns a new immutable state, which will be the new value of the store:
Entities State
This feature enables the store to act as an entities store. You can think of an entities state as a table in a database, where each table represents a flat collection of similar entities. Elf's entities state simplifies the process, giving you everything you need to manage it.
To use this feature, provide the withEntities props factory function in the createState call:
Elf provides you with a variety of built-in functionality, such as selectAll(), selectEntity(), selectMany(), selectActive(), addEntities(), updateEntities(), upsertEntities() and many more!
The Repository Pattern
The recommended way to use Elf is following the Repository Design Pattern. Implementing the Repository pattern is relatively simple. It’s a file that encapsulates the store queries and mutations:
The Repository pattern provides 2 main benefits:
- Using the pattern, you can replace your data store without changing your business code.
- It encourages you to implement all store operations in one place, making your code more reusable and easy to find.
Elf has a lot to offer. Devtools, state history, pagination, persist state, CLI, and more. Explore everything in our documentation:
Elf | A Reactive Store with Magical Powers
Elf - A Reactive Store with Magical Powers
ngneat.github.io
Having learned about Elf basics, we can now go on to learn how it can be used with React or Angular in the following articles:
