Example

Let's see the power of hermes-io, navigate the app below and notice the red flash animation indicating that there was a re-render only in the designated components.

store

Let's generate an instance of the Store class.

Then populate the store by passing the data argument to useStore.

reducer

When a mutation is performed the reducer will trigger an action that changes the data in the store.

mutations

In this file lives all possibles mutations, take at look to the setFileHightLight it will mutate the store to highlight the files names on the text field changes.

queries

In this file lives all posibles queries to the store for example: getHighlights retrives all the files highlighted in the store.

Implementation

With all the pieces in place we can performed mutations and queries for the desired use case for example the onClear function.

Now let's sync the store changes with ui by implementing useMutations.