Defining a tree

If you have been a developer for a few years you have to start changing your mindset a bit when working with Baobab. The reason is that the state in traditional web applications was based on database entries. You typically have collections and models, which many frameworks and libraries today base themselves upon.

When working with Baobab though you just have arrays and objects, and they do not reflect what is in your database, they reflect how your UI is built. So much like how backend developers plan how they are going to organize data in a database, you have to plan how to organize your state in a Baobab tree. Backend developers organize data to optimize writing and reading, you organize state for scalability of the UI.

Let us look at a very simple example stolen from the React JS site.

You can look at this as the specification for defining the state of the application. By looking at a mockup you are not only able to define what components you want to create, but you can also define the state tree:

var Baobab = require('baobab');

var tree = new Baobab({
  searchValue: '',
  onlyProductsInStock: false,
  products: [],
  searchResultByCategory: []
});

module.exports = tree;

So I would think you probably have a couple of questions here.

1. Why do we have two arrays? Would that not make duplicates of our product records? Yes, you are perfectly right, but how would you do this traditionally? You would probably still have an array with all the products and your view/component would do a filter. But it is the same thing, the filtered array in the component is also a new array. Instead of isolating that filtered array in the view/component, we make it available to all other components in our tree. Scalability.

2. What about the categories in the search result, where are those defined? This, on the other hand, is taken care of inside the component. This is how the component chooses to display the contents of the search result. When the component iterates the search result, where each item has a category, it will add an extra row indicating a change of category whenever it hits a new one.