Global state

If several components react on the same data, it is good to use a global state to store it. The most popular library to manage this kind of state is Redux

When the application starts, Oneki.js automatically creates a Redux store (or you can provide your own) and provides generic hooks to manage it:

• useGlobalState is a hook equivalent to the standard useState from React, but for the global state. It retrieves a specific entry from the global state and provides a setter to upate it.
• useGlobalProp to react on a data from the global state using a selector (read only, no setter provided)

useGlobalState

Oneki.js provide the hook useGlobalState to retrieve a specific data from the global state. Each time the data is updated in the global state, the component is re-rendered.

useGlobalState is similar to the standard useState from React, but for the global state. It retrieves a specific data from the global state and provides a setter to upate it.

const [state, setState] = useGlobalState<T>(key: string, defaultValue?: T);

Example

Simple example of useGlobalState

Use Global State

examples/cra-examples/src/state-management/UseGlobalStatePage.tsx

loading...

See full example on GitHub

👁 Preview

Interface

Inputs

Variable	Type	Description
key	string	The identifier of a property in the global state.
defaultValue	T	The value returned if the entry referenced by the key doesn't exist in the state

Values supported for the key parameter

info

The key identifies an entry in the global state. if the global state is the following

{
  key1: "value1",
  key2: {
    "key 3": "value3"
  },
 key4: [{
   key5: "value5"
  }]
}

then these keys are valid:

• "key1"
• "key2"
• "key2.key 3"
• "key4.0.key5"

Outputs

Variable	Type	Description
prop	T	The result is the value of the property in the global state identified by the key
setProp	SetGlobalStateFunction<T>	A function to update the value in the global state identified by the key

useGlobalProp

Oneki.js provides the useGlobalProp hook to retrieve data from the global state. Each time the data matching the selector is updated in the global state, the component is re-rendered.

useGlobalProp is similar to useSelector from React Redux but is tailored to be used with a Redux Store built by Oneki.js

Be sure to read the documentation of Redux to understand exactly how it works.

const prop = useGlobalProp<T>(key: string, defaultValue?: T);

Example

Simple example of useGlobalProp

Use Global State

examples/cra-examples/src/state-management/UseGlobalPropPage.tsx

loading...

See full example on GitHub

👁 Preview

Interface

Inputs

Variable	Type	Description
key	string	The identifier of a property in the global state.
defaultValue	T	The value returned if the property referenced by the key doesn't exist in the state

Values supported for the key parameter

info

The key identifies an entry in the global state. if the global state is the following

{
  key1: "value1",
  key2: {
    "key 3": "value3"
  },
 key4: [{
   key5: "value5"
  }]
}

then these keys are valid:

• "key1"
• "key2"
• "key2.key 3"
• "key4.0.key5"

Outputs

Variable	Type	Description
prop	T	The result is the value of the entry in the global state identified by the key