Global States

bind binds a component to Global States. count is not a local state. It consists globally.

set can change global states and other components get the state changes.

Global states are basically Recoil Atoms.

import { bind } from "nd"

export default bind(
  ({ set, count }) => (
    <div
      onClick={() => set((count || 0) + 1, "count")}
    >
      add count: {count || 0}
    </div>
  ),
  ["count"]
)

This is not easy to do with a bare React App.

import { bind } from "nd"

/* Counter component will get the same "count" value as the default component */
const Counter = bind(({ count }) => <span>{count || 0}</span>, ["count"])

export default bind(
  ({ set, count }) => (
    <div
      onClick={() => set((count || 0) + 1, "count")}
    >
      click to add count: <Counter />
    </div>
  ),
  ["count"]
)

You can also set an initial value on the fly. It doesn't work if the initial value is a function or an array whose first member is a function. They are recognized as "Global Functions".

import { bind } from "nd"

export default bind(
  ({ set, count }) => (
    <div
      onClick={() => set(count + 1, "count")}
    >
      add count: {count}
    </div>
  ),
  [{ "count" : 10 }]
)

Predefine global states

Global states can be predefined and initialized in /nd/init.js.

export default {
  count1 : 1,
  count2 : 2
}