dojo dragon main logo

高级的 store operation

Dojo Store 使用 operation 来更改应用程序的底层状态。这样设计 operation,有助于简化对 store 的常用交互,例如,operation 将自动创建支持 addreplace operation 所需的底层结构。

在未初始化的 store 中执行一个深度 add

import Store from '@dojo/framework/stores/Store';
import { add } from '@dojo/framework/stores/state/operations';

const store = new Store<State>();
const { at, path, apply } = store;
const user = { id: '0', name: 'Paul' };

apply([add(at(path('users', 'list'), 10), user)]);

结果为:

{
	"users": {
		"list": [
			{
				"id": "0",
				"name": "Paul"
			}
		]
	}
}

即使状态尚未初始化,Dojo 也能基于提供的 path 创建出底层的层次结构。这个操作是安全的,因为 TypeScript 和 Dojo 提供了类型安全。这允许用户很自然的使用 store 所用的 State 接口,而不需要显式关注 store 中保存的数据。

当需要显式使用数据时,可以使用 test 操作或者通过获取底层数据来断言该信息,并通过编程的方式来验证。

本示例使用 test 操作来确保已初始化,确保始终将 user 添加到列表的末尾:

import Store from '@dojo/framework/stores/Store';
import { test } from '@dojo/framework/stores/state/operations';

const store = new Store<State>();
const { at, path, apply } = store;

apply([test(at(path('users', 'list', 'length'), 0))]);

本示例通过编程的方式,确保 user 总是作为最后一个元素添加到列表的末尾:

import Store from '@dojo/framework/stores/Store';
import { add, test } from '@dojo/framework/stores/state/operations';

const store = new Store<State>();
const { get, at, path, apply } = store;
const user = { id: '0', name: 'Paul' };
const pos = get(path('users', 'list', 'length')) || 0;
apply([
	add(at(path('users', 'list'), pos), user),
	test(at(path('users', 'list'), pos), user),
	test(path('users', 'list', 'length'), pos + 1)
]);

禁止访问状态的根节点,如果访问将会引发错误,例如尝试执行 get(path('/'))。此限制也适用于 operation;不能创建一个更新状态根节点的 operation。@dojo/framewok/stores 的最佳实践是鼓励只访问 store 中最小的、必需的部分。