Context & Scope

The Context API design is inspired by Algebraic Effects. You may read the introduction first.

Keywords

Scope: where a module keeps it's data in

Context: a map of scope, you can call it scope context

Provider: a React component to hold a context

Provider

The handle function is given for modifying module in this context.

Let's see an example:

const moduleA = defineModule(...).build()
const moduleB = defineModule(...).build()
const moduleC = defineModule(...).build()

const ProviderA = defineProvider((handle) => {
  handle(moduleA, {
    defaultValue: { ... },
  });
  handle(moduleB, {
    defaultValue: { ... },
  });
});

const ProviderB = defineProvider((handle) => {
  handle(moduleB, {
    defaultValue: { ... },
  });
});

The code before can also be described in a Hierarchy Structure Graph.

In the upper structure, if we useActions from a component under ProviderB

It will get:

• moduleA handled by ProviderA

• moduleB handled by ProviderB

• moduleC handled by Global