What’s New in Akita for Angular: We’ve Added Your Top Requested Features

It’s only been three weeks since Akita’s latest release and we’ve already come up with hot new features ! (v1.2.0)

:sunglasses: Redux Dev-tools

This was a feature that many of you requested and we are delivering. Akita provides integration with the Redux dev-tools chrome extension.

Install the Redux extension from the supported App stores ( chrome , firefox ).

Call the akitaDevtools() function inside the app component, passing ngZone :

By default, Akita will do its best to describe the actions that occurred, but you can always define your own actions for debugging purposes . For example:

You can also whitelist and blacklist actions, get a full log trace, and more. For further information check out the docs .

:boom: State History

The StateHistoryPlugin provides a convenient way for undo and redo functionality, saving you the trouble of maintaining a history in the app yourself.

To use it you should instantiate a new StateHistoryPlugin object, passing the Query :

From the moment you call it, Akita’s StateHistory tracks the history of the store and gives you functionality like undo() , redo() , jumpToPast() , jumpToFuture() and more.

EntityStateHistoryPlugin

In addition to the general history functionality, Akita also provides a powerful API to help keep track of one or many entities, instead of the entire store.

A good example is when you have a table or a list of entities that the users can modify, and you want to give them a way to undo/redo their changes per entity. Here is how you can do it:

With this setup you will get the functionality mentioned above per entity.

For further information check out the docs .

:muscle|type_1_2: Persist Form

The PersistFormPlugin helps to keep your form synced with your store. One common scenario is preventing your user from losing data he filled in a form, after navigating away without saving it.

Lets say we’re building a form for adding new stories:

We can call the PersistNgFormPlugin , passing the StoriesQuery , the FormGroup , and a factory function which knows how to create a story.

With this setup, Akita does the following:

akitaForm

For further information check out the docs .

:star:️ Dirty Check

The DirtyCheckPlugin is useful for cases when you want an indication whether the state is dirty (data in the store has been modified). For example, you may want to display a save button only if the user changes something.

To activate the plugin you need to create a new instance of DirtyCheckPlugin , providing it with the Query :

From the moment you call setHead() , Akita's DirtyCheckPlugin takes the current store snapshot and saves it as the head (the value that we compare against). With every change to the store the plugin will compare it to the head value and notify you whether the state is dirty.

By calling reset() you are telling the plugin to update the store with the head value.

EntityDirtyCheckPlugin

As with the StateHistoryPlugin , this plugin also supports entity level functionality.

A good example is when you have a table or a list of entities that the users can modify, and you want to give them a way to revert it per entity. Here is how you can do it:

With this setup you can track the dirtiness per entity and revert it.

For further information check out the docs .

:point_right|type_1_2: Miscellaneous

• filterNil — New operator that filters undefined and null values.

• isEmpty() — New entity query method that returns a boolean which indicates whether the entity store is empty.

• Plugins ecosystem — We have new plugins ecosystem that all our current plugins are built on. We’ll explore this topic in another article, showing you how you can create your own plugins.

As always, we would :heart: to hear more feedback and new feature requests from you.

Here is more great content about Akita: