Getting Started

Three functions#

GlobX contains only three functions. Two functions has only one parameters, and one function has no parameters. That it. If you learn that, you know everything about GlobX.

newStore - Usually called once for a project with you initial store.
updateStore - Called after every change to your store, when you wish to rerender automatically the required components.
useRenderIfIChange - Called in every component that needs to be updated based on specific paths in your store

That It! No High-order-components. No Providers, connectors, modifiers, decorations, selectors or other smells.

Installation#

First you have to install GlobX

npm i globx

Creating your first store#

Create the store file mystore.js (or mystore.ts)

import {newStore} from 'globx'
const myStore=newStore({
  value:1,
  todos:[]
})
export default myStore

The store may contain primitive values, objects, functions, arrays, Dates or whatever you wish. is just a regular javascript object.

tip

If you need you can create more than one store

Then you can show values from the store and update or call functions in your store:

import store from './mystore'
function MyComponent(){
  return <div>
    Current value: {store.value}
    <button onClick={()=>{
      store.value++
    }}>Increment</button>
  </div>
}

To be sure that your component will render when value changed you have to do 2 things:

call the function updateStore after changing the store.
Call the function useRenderIfIChange and give it an array of values that should be inseted. One of the those values changed, the component will rerender.

import store from './mystore'
function MyComponent(){
  store.useRerenderIfChange(()=>[store.value])
  return <div>
    Current value: {store.value}
    <button onClick={()=>{
      store.value++
      store.updateStore()
    }}>Increment</button>
  </div>
}

note

That It! Now you know everything about how to use GlobX!

Mutating objects#

Another examples of a simple todo list. You don't have to clone the array:

import store from './mystore'
function MyComponent(){
  store.useRerenderIfChange(()=>[store.todos])
  return <div>
    {store.todos.map(x=><div>{x}</div>)}
    <button onClick={()=>{
      store.todos.push(new Math.random())
      store.updateStore()
    }}>Add new item</button>
  </div>
}

The last thing to know is that you have auto-complete everywhere:

All IDE smart language features like Renaming Symbols, or find all references are working.

Async operations#

What about async operations? It's working out of the box:

<button onClick={async ()=>{
  store.isLoading = true
  store.updateStore() // update ajax loaders on the screeen
  let res = await fetch('/getSomethingFromServer')
  store.isloading = false
  store.result=res
  store.updateStore()
}}>Add new item</button>
}

Sharing Logic#

If you wish to have a specific logic of mutating to the store (actions), you can add functions to the store and call them:

var store=newStore({
  value:1,
  setValue: newValue=>{
    store.value++
    store.updateStore()
  }
})

You can also create async functions.

Multi stores#

Although probably most of the projects will use one global store. You are free to create multi stores, and use each or both of them in any component.

tip

You can call updateStore as many time you wish. GlobX smart enough to executing it only once per rendering cycle.