高级的 store operation

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

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

  1. import Store from '@dojo/framework/stores/Store';
  2. import { add } from '@dojo/framework/stores/state/operations';
  3. const store = new Store<State>();
  4. const { at, path, apply } = store;
  5. const user = { id: '0', name: 'Paul' };
  6. apply([add(at(path('users', 'list'), 10), user)]);

结果为:

  1. {
  2. "users": {
  3. "list": [
  4. {
  5. "id": "0",
  6. "name": "Paul"
  7. }
  8. ]
  9. }
  10. }

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

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

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

  1. import Store from '@dojo/framework/stores/Store';
  2. import { test } from '@dojo/framework/stores/state/operations';
  3. const store = new Store<State>();
  4. const { at, path, apply } = store;
  5. apply([test(at(path('users', 'list', 'length'), 0))]);

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

  1. import Store from '@dojo/framework/stores/Store';
  2. import { add, test } from '@dojo/framework/stores/state/operations';
  3. const store = new Store<State>();
  4. const { get, at, path, apply } = store;
  5. const user = { id: '0', name: 'Paul' };
  6. const pos = get(path('users', 'list', 'length')) || 0;
  7. apply([
  8. add(at(path('users', 'list'), pos), user),
  9. test(at(path('users', 'list'), pos), user),
  10. test(path('users', 'list', 'length'), pos + 1)
  11. ]);

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