TypeScript process.createProcess函數代碼示例

import { createProcess } from '@dojo/stores/process';
import { replace } from '@dojo/stores/state/operations';
import { commandFactory } from './utils';
import { baseUrl } from '../config';

const getTagsCommand = commandFactory(async ({ path }) => {
	const response = await fetch(`${baseUrl}/tags`);
	const json = await response.json();

	return [replace(path('tags'), json.tags)];
});

export const getTagsProcess = createProcess('get-tags', [getTagsCommand]);

const getUserSettingsCommand = commandFactory(({ path, get }) => {
	return [replace(path('settings'), get(path('user')))];
});

const updateUserSettingsCommand = commandFactory(async ({ path, get }) => {
	const token = get(path('user', 'token'));
	const requestPayload = get(path('settings'));
	const response = await fetch(`${baseUrl}/user`, {
		method: 'put',
		headers: getHeaders(token),
		body: JSON.stringify(requestPayload)
	});

	const json = await response.json();

	return [
		replace(path('user'), json.user),
		replace(path('settings'), { loaded: false, loading: false }),
		replace(path('routing', 'outlet'), 'user'),
		replace(path('routing', 'params'), { username: get(path('settings', 'username')) })
	];
});

export const getUserSettingsProcess = createProcess('user-settings', [startUserSettingsCommand, getUserSettingsCommand]);
export const updateUserSettingsProcess = createProcess('update-user-settings', [updateUserSettingsCommand]);
export const usernameInputProcess = createProcess('username-input', [usernameInputCommand]);
export const emailInputProcess = createProcess('email-input', [emailInputCommand]);
export const passwordInputProcess = createProcess('password-input', [passwordInputCommand]);
export const bioInputProcess = createProcess('bio-input', [bioInputCommand]);
export const imageUrlInputProcess = createProcess('image-url-input', [imageUrlInputCommand]);

	const response = await fetch(`${url}limit=10&offset=${offset}`, { headers: getHeaders(token) });
	const json = await response.json();
	return [
		replace(path('feed', 'items'), json.articles),
		replace(path('feed', 'total'), json.articlesCount),
		replace(path('feed', 'offset'), offset),
		replace(path('feed', 'loading'), false),
		replace(path('feed', 'loaded'), true)
	];
});

const favoriteFeedArticleCommand = commandFactory<FavoriteArticlePayload>(
	async ({ at, get, path, payload: { slug, favorited } }) => {
		const token = get(path('user', 'token'));
		const response = await fetch(`${baseUrl}/articles/${slug}/favorite`, {
			method: favorited ? 'delete' : 'post',
			headers: getHeaders(token)
		});
		const json = await response.json();
		const index = getItemIndex(get(path('feed', 'items')), slug);

		if (index !== -1) {
			return [replace(at(path('feed', 'items'), index), json.article)];
		}
		return [];
	}
);

export const fetchFeedProcess = createProcess('fetch-feed', [startFetchingFeedCommand, fetchFeedCommand]);
export const favoriteFeedArticleProcess = createProcess('fav-feed-article', [favoriteFeedArticleCommand]);

	return [ replace(path('currentSearch'), search) ];
});

const initialStateCommand = commandFactory(({ path }) => {
	return [
		add(path('completedCount'), 0),
		add(path('completed'), false),
		add(path('currentSearch'), ''),
		add(path('currentTodo'), ''),
		add(path('editedTodo'), undefined),
		add(path('todoCount'), 0),
		add(path('todos'), {})
	];
});

export const initialStateProcess = createProcess('initial-state', [ initialStateCommand ]);

export const addTodoProcess = createProcess('add-todo', [ addTodoCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]);

export const removeTodoProcess = createProcess('remove-todo', [ removeTodoCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]);

export const toggleTodoProcess = createProcess('toggle-todo', [ toggleTodoCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]);

export const toggleTodosProcess = createProcess('toggle-todos', [ toggleTodosCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]);

export const editTodoProcess = createProcess('edit-todo', [ editTodoCommand ]);

export const clearCompletedProcess = createProcess('clear-completed', [ clearCompletedCommand, updateTodoCountsCommand, updateCompletedFlagCommand ]);

export const saveTodoProcess = createProcess('save-todo', [ saveTodoCommand ]);

	const url = slug ? `${baseUrl}/articles/${slug}` : `${baseUrl}/articles`;
	const response = await fetch(url, {
		method: slug ? 'put' : 'post',
		headers: getHeaders(token),
		body: JSON.stringify(requestPayload)
	});
	const json = await response.json();

	if (!response.ok) {
		return [replace(path('editor', 'loading'), false), replace(path('errors'), json.errors)];
	}

	return [
		replace(path('article', 'item'), json.article),
		replace(path('article', 'loaded'), true),
		replace(path('editor'), undefined),
		replace(path('routing', 'outlet'), 'article'),
		replace(path('routing', 'params'), { slug: json.article.slug })
	];
});

export const titleInputProcess = createProcess('title-input', [titleInputCommand]);
export const descInputProcess = createProcess('desc-input', [descriptionInputCommand]);
export const bodyInputProcess = createProcess('body-input', [bodyInputCommand]);
export const tagInputProcess = createProcess('tag-input', [tagInputCommand]);
export const addTagProcess = createProcess('add-tag', [addTagCommand, clearTagInputCommand]);
export const removeTagProcess = createProcess('remove-tag', [removeTagCommand]);
export const getEditorArticleProcess = createProcess('get-editor-article', [getArticleForEditorCommand]);
export const publishArticleProcess = createProcess('publish-article', [startPublishCommand, publishArticleCommand]);
export const clearEditorProcess = createProcess('clear-editor', [clearEditorCommand]);

			replace(path('user'), {})
		];
	}

	global.sessionStorage.setItem('conduit-session', JSON.stringify(json.user));

	return [
		replace(path('routing', 'outlet'), 'home'),
		replace(path('register', 'loading'), false),
		replace(path('errors'), undefined),
		replace(path('user'), json.user),
		replace(path('feed', 'items'), undefined),
		replace(path('feed', 'loaded'), false)
	];
});

const logoutCommand = commandFactory(({ path }) => {
	global.sessionStorage.removeItem('conduit-session');
	return [replace(path('routing', 'outlet'), 'home'), replace(path('user'), {})];
});

export const loginProcess = createProcess('login', [startLoginCommand, loginCommand, clearLoginInputs]);
export const registerProcess = createProcess('register', [startRegisterCommand, registerCommand, clearRegisterInputs]);
export const loginEmailInputProcess = createProcess('login-email-input', [loginEmailInputCommand]);
export const loginPasswordInputProcess = createProcess('login-password-input', [loginPasswordInputCommand]);
export const registerEmailInputProcess = createProcess('register-email-input', [registerEmailInputCommand]);
export const registerPasswordInputProcess = createProcess('register-password-input', [registerPasswordInputCommand]);
export const registerUsernameInputProcess = createProcess('register-username-input', [registerUsernameInputCommand]);
export const setSessionProcess = createProcess('set-session', [setSessionCommand]);
export const logoutProcess = createProcess('logout', [logoutCommand]);

import { createProcess } from '@dojo/stores/process';
import { replace } from '@dojo/stores/state/operations';
import { commandFactory } from './utils';
import { ChangeRoutePayload } from './interfaces';

const changeRouteCommand = commandFactory<ChangeRoutePayload>(({ path, payload: { outlet, context } }) => {
	return [
		replace(path('routing', 'outlet'), outlet),
		replace(path('routing', 'params'), context.params),
		replace(path('settings', 'loaded'), false),
		replace(path('profile', 'loaded'), false),
		replace(path('feed', 'loaded'), false),
		replace(path('feed', 'category'), undefined),
		replace(path('editor', 'loaded'), false),
		replace(path('errors'), {})
	];
});

export const changeRouteProcess = createProcess('change-route', [changeRouteCommand]);

const followUserCommand = commandFactory<FollowUserPayload>(async ({ get, path, payload: { username, following } }) => {
	const token = get(path('user', 'token'));
	const response = await fetch(`${baseUrl}/profiles/${username}/follow`, {
		method: following ? 'delete' : 'post',
		headers: getHeaders(token)
	});
	const json = await response.json();

	return [replace(path('profile'), json.profile)];
});

const getProfileCommand = commandFactory<UsernamePayload>(async ({ get, path, payload: { username } }) => {
	const token = get(path('user', 'token'));
	const response = await fetch(`${baseUrl}/profiles/${username}`, {
		headers: getHeaders(token)
	});
	const json = await response.json();

	return [
		replace(path('profile', 'image'), json.profile.image),
		replace(path('profile', 'bio'), json.profile.bio),
		replace(path('profile', 'following'), json.profile.following),
		replace(path('profile', 'loading'), false),
		replace(path('profile', 'loaded'), true)
	];
});

export const getProfileProcess = createProcess('get-profile', [startGetProfileCommand, getProfileCommand]);
export const followUserProcess = createProcess('follow-user', [followUserCommand]);

		}
	}

	if (index !== -1) {
		return [remove(at(path('article', 'comments'), index))];
	}
	return [];
});

const newCommentInputCommand = commandFactory<NewCommentPayload>(({ path, payload: { newComment } }) => {
	return [replace(path('article', 'newComment'), newComment)];
});

const deleteArticleCommand = commandFactory<SlugPayload>(async ({ get, path, payload: { slug } }) => {
	const token = get(path('user', 'token'));
	await fetch(`${baseUrl}/articles/${slug}`, {
		method: 'delete',
		headers: getHeaders(token)
	});

	return [replace(path('routing', 'outlet'), 'home')];
});

export const getArticleProcess = createProcess('get-article', [startLoadingArticleCommand, [loadArticleCommand, loadCommentsCommand]]);
export const deleteCommentProcess = createProcess('delete-comment', [deleteCommentCommand]);
export const addCommentProcess = createProcess('add-comment', [addCommentCommand]);
export const newCommentInputProcess = createProcess('new-comment-input', [newCommentInputCommand]);
export const favoriteArticleProcess = createProcess('fav-article', [favoriteArticleCommand]);
export const followUserProcess = createProcess('follow-user', [followUserCommand]);
export const deleteArticleProcess = createProcess('delete-article', [deleteArticleCommand]);