A quick look at Nanostores

Nanostores is a tiny JavaScript package that allows you to manage your app state with ease. In this blog post, I will tell you more about this package and then show you how I have created a simple to-do list app with React and Nanostores.

Nanostores is a project built and maintained by an IT consultancy agency named The Evil Martians (what a cool name 😎). They have developed a tiny and easy-to-use JavaScript state management package with integrations for the most popular JavaScript front-end frameworks out there, like React and Vue.

Their product gives us an easy-to-use API with basic but essential features such as state management and store event listeners.

To cover the basics of Nanostores, I've built a simple to-do list with React. The project is simple: list all the to-dos, add a to-do to the list, mark a to-do as completed, delete a to-do from the list, and delete all the to-dos at once. I've also implemented a small authentication layer handled by Nanostores to give you another example of implementation.

Without further ado, let's dive into the code

I have created two stores: one to manage authentication and another to manage the to-dos.

Let's take a look at the authentication store.

As you can see, the implementation is quite simple. I could have done the same with React Context, but that would have required more boilerplate, and I would also have needed to wrap my app with a Provider.

Now, let's take a look at the to-do store. It's not that different from the authentication store, but it has more functions since we need to perform more operations on the store. I've also added the possibility to persist the store in the browser's local storage for every operation, so we don't lose any data when leaving the app.

With that done, I can simply consume the stores and the functions inside my app, and everything should be working fine. Here is a demo of the working app.

Conclusion

As you can see, Nanostores is quite simple to learn and convenient to work with. It's an alternative to React Context for numerous scenarios. While I didn't go into all the features in this article to maintain simplicity, I highly recommend exploring what else the package can do. Take a look what the package offers!

Opting for Nanostores is a good choice if you aim to separate intricate business logic from your application's components. This is similar to what you would achieve using React Context, but Nanostores provides additional functionalities.

I hope you found this introduction to Nanostores interesting! Until next time, take care 👋