Application state management with Rootz JS

A single solution to all React Applications…

All applications have actions. An action is a function that modifies the state. Conceptually an action always occurs in response to an event. For example: click of a button, on change of text, on submit etc.

Rootz provides factory functions called as Action Generators to create actions. The focus is more on what is the new state and how is it going to be changed, rather thinking about how the actions are going to change or update the state. This separates the concern of “How” and “What”. It expects the user to focus more on “What” and leave the “How” on Rootz. This lets the user to focus on the state, and let Rootz handle the rest of it.

This provides user to:-

  1. Avoid thinking about the application structure.
  2. Avoid lifting the state to the parent, which in some cases may need to handle the state of a lot of its child components.
  3. Handle updates with components far from current hierarchy.
  4. Handle multiple components having inter-state dependency.

Let’s take an example of a Todo App to see how Rootz makes things simpler. We would first consider a traditional approach without Rootz.

Without Rootz

A Todo App as structured in the diagram below consists of two components which needs to share between each other, and .

AddTodo, would consist of an input text which would fetch a new Todo from the user and update it to the list of which initially would be empty.

And TodoList would refer the updated by AddTodo component to render the list of todos added.

As this seems to be a simple concept of lifting the state up to create state dependency on a parent component, let’s check how it would appear as while implementing the same.

The state and actions are defined within the and are passed to the child Components as . Any updates on TodoApp would result into re-render of its the child components.

The point here is, the user may have to start thinking on those aspects on how to handle the state, lift the state up and manage props and actions accordingly. React alone can handle the state of the application by itself. But this doesn’t come handy.

Let’s see what Rootz has to provide in comparison to the above scenario.

The () node holds the list of to be rendered. The node passes the to the as the user clicks on the add todo button. On the click event, a () is raised to update the state of node.

With Rootz, the same scenario is handled by letting the individual components take the decision by themselves. As Rootz handles the state centrally, all the Nodes are connected to the centralised store. This makes it easy to manage the state of the application as a whole.

Above Theory in Actions

Nodes abide to Contract

A Contract is made between both the Nodes AddTodo and TodoList. This contract mentions TodoList to provide access to its state and AddTodo the right to update it. These Nodes would abide to the contract made. Breaching the contract definition would result in error.

Rootz provides infrastructure that does most of the work for you. This enables the user to update a Node from another by simply calling an action.

It already creates the boilerplate code and makes them available for users which otherwise, they might end up creating.

This helps the users rapidly create state based react apps without thinking much about the state. This also helps the users to decouple the render and controller part of a React Component. (the part which is responsible for render elements) and the (the part which acts as a controller to the component). This segregation brings added advantage of reusing the components in the application with multiple nodes(controllers).

Rootz as a community is growing fast. We are expecting like-minders Rootzies to join us on making a product which can make an impact. We have a roadmap with major destinations. And all these destinations carry a vision to change the way we look at our application today.

If you feel you can make an impact, you are welcome. Because we know you certainly will :)

blogs: http://rootzjs.medium.com
github: http://github.com/rootzjs
npm: http://npmjs.com/package/@rootzjs/core
discord: http://discord.gg/RnDRtD7faF
linkedin: http://linkedin.com/company/rootzjs

Love to scribble about JavaScript and React JS. Been almost a decade with the tech. I feel i can be of some help to those looking forward on these buddies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store