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:-
- Avoid thinking about the application structure.
- Avoid lifting the state to the parent, which in some cases may need to handle the state of a lot of its child components.
- Handle updates with components far from current hierarchy.
- 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 todos between each other, AddTodo and TodoList.
AddTodo, would consist of an input text which would fetch a new Todo from the user and update it to the list of todos which initially would be empty.
And TodoList would refer the todos 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 TodoApp and are passed to the child Components as props. 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.
But what if this is provided out of the box ? What if the user needs quick development of the apps ? which most of the requirements sounds like.
Let’s see what Rootz has to provide in comparison to the above scenario.
The TodoList(Check what Nodes are in Rootz) node holds the list of todos to be rendered. The AddTodo node passes the new todos to the TodoList as the user clicks on the add todo button. On the click event, a Contract (Contract is an action used to update other Nodes) is raised to update the state of TodoList 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. Components(the part which is responsible for render elements) and the Nodes(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 :)
Please STAR, FOLLOW and FORK us.
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
Happy Coding Rootzies !!
