Local state

If a single component needs to react to specific data, it's not necessary to store the data in a global state. For this type of data, a local state is sufficient.
For a simple use case, it's often sufficient to use the standard useState from React and we recommend it.

For more complexe use cases, Oneki.js introduces the concept of Local services.
Generally, you only need to create a Local service when you need either

• a scenario / orchestration
• or an immutable state

An example of scenario is retrieving data via an AJAX GET request. The scenario consists of the following steps:

• Set the "loading" variable in the local state to true
• Execute the AJAX GET request and store the result in the local state
• Set the "loading" variable in the local state to false

You can instanciate a Local service multiple times in multiple components to reuse the same logic.
E.g: the above scenario is exactly what the useGet hook does and you can reuse it in multiple components.

Local service

const [state, service] = useLocalService(ServiceClass, initialState);

The goal of useLocalService is to create a service local to the component with two types of methods:

• Reducer methods: the role of these methods is to update the local state of the component. These methods are generally very simple.
• Saga methods:
  • These methods are generally asynchronous and more complex.
  • A saga method is more like a flow. Each step of the flow can be asynchronous and can trigger a re-render
  • A saga method never updates the local state by itself. It always calls a Reducer method to do that.

caution

Be sure to read the documentation of Redux and Redux Saga to understand exactly how it works.
Oneki.js has an opinionated approach on how to use these librairies and tries to remove most of the complexity, but it's important to understand how it works underneath.

See the service section to have an in-depth explanation of a service.

Example

Simple example of useLocalService

This very basic example is for demonstration only as a simple useState would be normally enough.

info

You don't need to understand how to build services yet. This page explains how to build services

Use Global State

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

loading...

See full example on GitHub

My Local Service

examples/cra-examples/src/state-management/@service/MyLocalService.ts

loading...

See full example on GitHub

👁 Preview

Interface

Inputs

Variable	Type	Description
ServiceClass	Class	A class that extends DefaultLocalService
initialState	Object	The initial state of the service

Outputs

Variable	Type	Description
state	Object	The immutable state managed by the service (can be upated only by the service)
service	Class	The service to manage the state