高级的 store operation
Dojo Store 使用 operation 来更改应用程序的底层状态。这样设计 operation,有助于简化对 store 的常用交互,例如,operation 将自动创建支持 add
或 replace
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 中最小的、必需的部分。