Scope API

import { type Scope, fork } from "effector";

const scope = fork();

Scope is a fully isolated instance of application. The primary purpose of scope includes SSR (Server-Side Rendering) but is not limited to this use case. A Scope contains an independent clone of all units (including connections between them) and basic methods to access them.

Scope peculiarities

1. There are a few rules that must be followed to work successfully with scope.
2. Your scope can be lost to avoid this use scopeBind.

Scope methods

.getState($store)

Returns the value of a store in a given scope:

• Formula

const scope: Scope;
const $value: Store<T> | StoreWritable<T>;

const value: T = scope.getState($value);

• Type

scope.getState<T>(store: Store<T>): T;

• Returns

The value of the store.

• Examples

Create two instances of an application, trigger events in them, and test the $counter store value in both instances:

import { createStore, createEvent, fork, allSettled } from "effector";

const inc = createEvent();
const dec = createEvent();
const $counter = createStore(0);

$counter.on(inc, (value) => value + 1);
$counter.on(dec, (value) => value - 1);

const scopeA = fork();
const scopeB = fork();

await allSettled(inc, { scope: scopeA });
await allSettled(dec, { scope: scopeB });

console.log($counter.getState()); // => 0
console.log(scopeA.getState($counter)); // => 1
console.log(scopeB.getState($counter)); // => -1

Try it.

Related API and Articles

• API
  • scopeBind – Method for binding a unit to a scope
  • fork – Operator for creating a scope
  • allSettled – Method for running a unit in a given scope and waiting for the entire chain of effects to complete
  • serialize – Method for obtaining serialized store values
  • hydrate – Method for hydrating serialized data
• Articles
  • How to lose scope and fix it
  • Using scopes with SSR
  • How to test units