Aurelia在一次操作中两次更改状态

Question

我正在使用aurelia进行开发，并使用aurelia-store进行应用程序状态管理。在从服务器加载数据时，我希望更改isLoading字段true/false以显示相关组件的掩码。因此，我在状态isLoading中定义了一个属性(例如)。在加载操作中，我希望首先将加载状态更改为true，并在检索数据后将其更改为false。因此，根据该字段的值(isLoading)，我希望显示组件上的掩码。

我想要这样的东西：

export async function getRoles(state) {
  try {
    return Object.assign({}, state, { isRolesListLoading: {busy: true} });
    const getRoles = await accountManagement.getRoles();
    return Object.assign({}, state, { getRoles, isRolesListLoading: {busy: false} });

  } catch (error) {
    console.log('error getRoles "error": ', error);
  }
}

但正如我从aurelia文档中发现的那样，在一个操作中不允许两个状态更改。

我该怎么办？

我有一个想法，在这个动作中调度另一个动作，首先让isLoading为真，然后再做这项工作。如下所示：

export async function getRoles(state) {
  try {
    desiredDispatch('goToLoadingState'); // fake code
    const getRoles = await accountManagement.getRoles();
    return Object.assign({}, state, { getRoles, isRolesListLoading: {busy: false} });

  } catch (error) {
    console.log('error getRoles "error": ', error);
  }
}

但是我找不到关于如何在一个操作中分派另一个操作的文档。

可能的解决方案是什么？

Answer 1

我试着把你的问题简化成一个小样本，你可以在here上找到。

initialState如下所示：

initialState: {
  roles: [],
  isLoading: false
}

正如您所看到的，它有一个roles数组，其中应该存储要加载的角色，以及一个isLoading布尔值，用于有条件地显示加载指示器。

现在我们已经设置了样例，让我们深入了解细节。

首先，从一个操作中远程加载数据是可行的，但要小心完成。Aurelia Store的分派流水线是异步队列。这意味着新的操作将在结束时自动排队。现在，如果当前执行的操作需要很长时间才能解决，您可能会遇到UI滞后等问题，因为所有后续操作只会在以后更新。

其次，一个动作应该创建一个新的状态。你实际上想要做的是由3个动作组成。

1. 打开加载指示器

data并更新存储

1. 关闭加载指示器

因此，就像在链接的示例中一样，我建议使用以下方法：

export class App {
  ...

  async loadRoles() {
    // Activate the loader, await the action so you don't start loading before the new state is actually set
    await this.store.dispatch(setLoader, true);
    // Local to the function start loading the roles, so you don't block the action queue
    const roles = await loadRoles();
    // once the data is available update the roles
    await this.store.dispatch(updateRoles, roles);
    // once that is set disable the loader
    await this.store.dispatch(setLoader, false);
  }
}

async function loadRoles() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(["User role", "Admin role", "Superuser role"]);
    }, 1000);
  });
}

function setLoader(state, isLoading) {
  return Object.assign({}, state, { isLoading });
}

function updateRoles(state, roles) {
  return Object.assign({}, state, { roles });
}

现在，这3次调度也可以减少到2次，因为设置数据加上禁用加载程序可以一次完成。动作的好处是，你可以创建一个新的函数，它通过在旧的两个函数中组合一个新的函数来实现这一点。

function updateRolesAndDisableLoader(state, roles) {
  return Object.assign(
    {},
    updateRoles(state, roles),
    setLoader(state, false)
  );
}