介绍

Command 工厂

Store 中有一个简单的封装函数，用于创建 command，是一个类型安全的工厂函数。

创建 store 工厂：

import { createCommandFactory } from '@dojo/framework/stores/process';
import { State } from './interfaces';

const createCommand = createCommandFactory<State>();

const myCommand = createCommand(({ at, get, path, payload, state }) => {
	return [];
});

createCommand ensures that the wrapped command has the correct typing and the passed CommandRequest functions get typed to the State interface provided to createCommandFactory. While it is possible to manually type commands, the examples in this guide use createCommand. createCommand 确保封装的 command 具有正确的类型，而传入的 CommandRequest 函数能获得通过 createCommandFactory 提供的 State 接口的类型。虽然可以手动为 command 设置类型，但本指南中的示例使用 createCommand。

path

path 是一个 string，用于描述应用 operation 的位置。path 函数是 CommandRequest 中的一部分，可以在 Command 中访问。

本示例中，path 描述了 store 中的一个位置。State 与上面 interface.d.ts 中定义的相同。Store 通过 State 接口获知状态数据的形状。

定义一个获取当前用户名的 path：

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

path('users', 'current', 'name');

这个 path 引用的 string 值位于 /users/current/name。path 以类型安全的方式遍历层次结构，确保只能使用在 State 接口中定义的属性名。

at

at 函数与 path 函数一起标识数组中的位置。本示例使用了 at 函数。

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

at(path('users', 'list'), 1);

这个 path 引用的是位于 /user/list 中偏移量为 1 的 User。

add operation

用于向对象中添加值或者向数组中插入值。

import { createCommandFactory } from '@dojo/framework/stores/process';
import { State } from './interfaces';
import { add } from '@dojo/framework/stores/state/operations';

const createCommand = createCommandFactory<State>();
const myCommand = createCommand(({ at, get, path, payload, state }) => {
	const user = { id: '0', name: 'Paul' };

	return [add(at(path('users', 'list'), 0), user)];
});

会将 user 插入到用户列表的起始位置。

remove operation

从对象或数组中移除值。

import { createCommandFactory } from '@dojo/framework/stores/process';
import { State } from './interfaces';
import { add, remove } from '@dojo/framework/stores/state/operations';

const createCommand = createCommandFactory<State>();
const myCommand = createCommand(({ at, get, path, payload, state }) => {
	const user = { id: '0', name: 'Paul' };

	return [
		add(path('users'), {
			current: user,
			list: [user]
		}),
		remove(at(path('users', 'list'), 0))
	];
});

本示例先为 users 添加一个初始状态，然后移除 list 中的第一个 user。

replace operation

替换值。相当于先 remove 再 add。

import { createCommandFactory } from '@dojo/framework/stores/process';
import { State } from './interfaces';
import { add, replace } from '@dojo/framework/stores/state/operations';

const createCommand = createCommandFactory<State>();
const myCommand = createCommand(({ at, get, path, payload, state }) => {
	const users = [{ id: '0', name: 'Paul' }, { id: '1', name: 'Michael' }];
	const newUser = { id: '2', name: 'Shannon' };

	return [
		add(path('users'), {
			current: user[0],
			list: users
		}),
		replace(at(path('users', 'list'), 1), newUser)
	];
});

本示例使用 newUser 替换掉 list 中的第二个用户信息。

get

get 函数会返回 store 在指定 path 位置的值，如果该位置不存在值，则返回 undefined。

import { createCommandFactory } from '@dojo/framework/stores/process';
import { State } from './interfaces';
import { remove, replace } from '@dojo/framework/stores/state/operations';

const createCommand = createCommandFactory<State>();

const updateCurrentUser = createCommand(async ({ at, get, path }) => {
	const token = get(path('auth', 'token'));

	if (!token) {
		return [remove(path('users', 'current'))];
	} else {
		const user = await fetchCurrentUser(token);
		return [replace(path('users', 'current'), user)];
	}
});

本示例检查是否存在身份认证令牌，然后据此更新当前用户的信息。

payload

payload 是一个对象字面量，当 process 调用 command 时，会将其传给 command。也可以在构建命令时传入 payload 的类型。

import { createCommandFactory } from '@dojo/framework/stores/process';
import { State } from './interfaces';
import { remove, replace } from '@dojo/framework/stores/state/operations';

const createCommand = createCommandFactory<State>();

const addUser = createCommand<User>(({ at, path, payload }) => {
	return [add(at(path('users', 'list'), 0), payload)];
});

本示例将 payload 提供的用户信息添加到 /users/list 的起始位置。

异步 command

command 可以同步执行，也可以异步执行。异步 command 应该返回一个 Promise，以便指出何时完成。每个 command 成功完成后，将自动收集和应用 operation。

创建 process

首先，创建两个 command，负责获取用户令牌，并使用该令牌加载 User。然后创建一个 process 来使用这两个 command。每一个 process 都应该使用 ID 唯一标识。此 ID 在 store 内部使用。

import { createCommandFactory, createProcess } from "@dojo/framework/stores/process";
import { State } from './interfaces';
import { add, replace } from "@dojo/framework/stores/state/operations";

const createCommand = createCommandFactory<State>();

const fetchUser = createCommand(async ({ at, get, payload: { username, password } }) => {
	const token = await fetchToken(username, password);

	return [
		add(path('auth', 'token'), token);
	];
}

const loadUserData = createCommand(async ({ path }) => {
	const token = get(path('auth', 'token'));
	const user = await fetchCurrentUser(token);
	return [
		replace(path('users', 'current'), user)
	];
});

export const login = createProcess('login', [ fetchUser, loadUserData ]);

payload 类型

process 执行器(process executor)的 payload 是从 command 的 payload 类型推断出来的。如果命令间的 payload 类型不同，则需要显式定义 process 执行器的 payload 类型。

const createCommand = createCommandFactory<State>();

const commandOne = createCommand<{ one: string }>(({ payload }) => {
	return [];
});

const commandTwo = createCommand<{ two: string }>(({ payload }) => {
	return [];
});

const process = createProcess<State, { one: string; two: string }>('example', [commandOne, commandTwo]);

process(store)({ one: 'one', two: 'two' });