ConanJs vs Redux. Comparing a simple TODO App

ConanJs the new framework to manage State in React. This article is for you if you use Redux, we think you will be impressed with how little code you will need to write with ConanJs compared with Redux.

Introduction

Most of the frontend frameworks start showing their potential by building a list of TODOs. Although we think this is not an accurate use case that you will need to implement in any real web app these days, we wanted to compare it with Redux, and then add some extra features that will make it more realistic.

A simple TODO app

Let’s ignore the UI code, as it is irrelevant and very similar, and let’s focus on what is really important in this article: The code to manage the state of the todos.

For this article we are going to use the following two examples for the official docs for each framework:

Todos - Basic

Example: Todo List | Redux

Defining the state

With Redux, there isn’t really the concept of state as a capsule of reusable data, instead, you work against a global object, the store, and you throw actions that will then cause reducers to mutate the store.

Redux being one of the first frameworks oriented at managing the state, was groundbreaking, but unfortunately you can tell that is already feeling outdated. Let’s have a look at how to create this store, which basically is with the reducers, note that we assume that you are familiar with Redux so we will just put the code below.

creates the redux store

With ConanJs, you create state as plain Javascript object that you can reuse, this is very handy and lets you decide how to scope your state as opposed to always have global state, as with Redux.We are going to use Conan.state to create the equivalent state to the store created above with Redux.Note that we call Conan.state and we pass the following information:

• A string: which is the name for the state (used for logging)
• Initial data: the initial data the store will hold immediately after being created (this is not straightforward with redux)
• Reducers: similar to Redux we pass the reducers, but we don’t use a switch case, they are each a function that can be invoked, this way, you don’t have to have reducers and actions!

reducers can be inlined or externally included

You can find more details on ConanJs reducers here:

Reducers

Adding your actions

With ConanJs, you don’t have to specify actions. If you create reducers, ConanJs creates actions for you. For the context of this article, there is no need to go into the details, but there are other cool things ConanJs does to help you update your state easily. If you want to deep dive, have a look at our actions & reducers docs:

Actions & Reducers

Now with Redux this is how you would define your actions. Since we assume you are familiar with it, we will just copy paste the code down here:

Usage with React

With Redux you can do this using the famous connect, mapStateToProps and mapDispatchToProps.

Connecting the state to the component is a necessary evil when your state is global, we feel that becomes tedious and adds unnecessary complexity.

With ConanJs, the state is in capsules that you can consume however you prefer, for instance, in this example, we are illustrating one possible way to do so using a high order component that comes out of the box with the framework. With ConanJs, this is how you can connect your React component:

TodoListRender is now fully connected to the state

This is just one of many ways ConanJs has to connect components with a state. For more examples please visit:

Observing State

Bonus points: ConanJs also provides Dependency Injection, as you can see in the previous example. For more information on this, please visit:

https://docs.conanjs.io/dependency-injection/general-concepts

Conclusion

While we recognize Redux is a well architected pattern that resolves the global state management conundrum, we believe it is very opinionated and enforces writing, organizing and testing the application code in a very specific way.

Aiming to get free from that pattern, we created ConanJs, to reduce the boiler plate code and allow you to decide how to organize and test your application code.

In summary, with Redux 93 lines of code, with ConanJs 33 lines of cod

Adding more complexity

Let us think now what would be needed in order to make this TODO app a more realistic webapp. What if we needed to add async API calls, optimistic updates? How would you do it using Redux? Stay tuned for our next post on how ConanJs can help you with that.

To check our github repo:

conan-js/conan-js-core

Thank you!