@ngrx/store：从一个动作中调度。好用吗？怎么做？答案

【问题标题】：@ngrx/store: dispatch from an action. Is it good & how to?@ngrx/store：从一个动作中调度。好用吗？怎么做？
【发布时间】：2016-11-09 18:00:59
【问题描述】：

我正在使用 Angular 2 和 @ngrx/store.question 开展一个项目，了解一个好的做法以及如何做到这一点。

我开发了一个“网络查找器”来管理文件。所以我可以做一些基本的操作，比如复制、移动等。

我不会解释原因，因为这只是一个示例，但移动文件包含 3 个步骤：

逻辑：做一些验证。
调度一个动作A
发送操作 B

这 3 个步骤在我的角度组件内完成。我已经考虑过了，我认为最好只调度一个执行一些验证的动作并调度其他 2 个动作。

我为什么要这样做？首先，它更容易阅读

this._store.dispatch(copy(myFile));

而不是

// ...
// verifications
// ...

this._store.dispatch(action1(myFile, foo, bar));
this._store.dispatch(action2(myFile));

其次，我可以即时发送我的 copy 动作创建者而不会遇到任何副作用，因为验证将在动作内部执行。

实际上，我可以发送我的action1 和action2 而无需进行验证。

最后，我所有的逻辑都在我的行动中。我可以让我的组件保持简单并专注于他们的工作（管理 UI 等）。太棒了。

问题 1：好的做法？

这样做是个好主意吗？我想是的，但你的经历让我很感兴趣。

问题 2：如何？

如何做到这一点？我的动作创建者只是函数。我不能用Injectable 装饰它们并使用constructor 注入实例。

以下是动作创建者的示例：

import { Action } from '@ngrx/store'

export const NAVIGATE_TO_NODE:string = '[Browser] Navigate to node';
export const ADD_TO_SELECTION:string = '[Browser] Add to browser selection';
export const REMOVE_FROM_SELECTION:string = '[Browser] Remove from browser selection';
export const REMOVE_ALL_FROM_SELECTION:string = '[Browser] Remove all from browser selection';

export const navigateToNode:(nodeId: number, paneId?: number)=>Action = (nodeId: number, paneId?: number) => {
  return {
    payload: { nodeId, paneId },
    type: NAVIGATE_TO_NODE
  };
};
export const addToSelection: (addInfo: any)=>Action = (addInfo: any) => {
  return {
    payload: addInfo,
    type: ADD_TO_SELECTION
  };
};
export const removeFromSelection: (removeInfo: any[])=>Action = (removeInfo: any[]) => {
  return {
    payload: removeInfo,
    type: REMOVE_FROM_SELECTION
  }
};
export const removeAllFromSelection: ()=>Action = () => {
  return {
    payload: null,
    type: REMOVE_ALL_FROM_SELECTION
  }
};

我如何从那些动作创建者那里分派？

我已经使用 redux 作为 Redux 和 React 的实现，并且我创建了一个小包，允许我从动作创建者处分派：redux-thunk

【问题讨论】：

标签： angular typescript redux ngrx

【解决方案1】：

抱歉，我只是略过您的问题，这只是对部分问题的回应。如果你想让你的动作创建者可注入，那么将它们包装在一个类中。您可以从链接到 ngrx/store 的自述文件的 ngrx 示例应用程序中获得一些关于结构的优秀想法。我正在创建一个项目，在其中模仿动作创建者的设置。

https://github.com/ngrx/example-app/tree/master/src/actions

【讨论】：

它现在在这里。 github.com/ngrx/example-app/tree/master/src/app/actions

【解决方案2】：

我将第二个有线程序员的建议看一下 ngrx 示例应用程序。它展示了如何构建动作、reducers 和效果。

这是一个可注入动作类的示例。

@Injectable()
export class BookActions {
  static SEARCH = '[Book] Search';
  search(query: string): Action {
    return {
      type: BookActions.SEARCH,
      payload: query
    };
  }

然后在你的组件中...

constructor(private store: Store<AppState>, private bookActions: BookActions) {}

search(query: SearchOutput) {
  this.store.dispatch(this.bookActions.search(query));
}

以这种方式接近它。 Reducers 应该是没有副作用的纯函数。因此，例如，要移动文件，您可以调度一个启动事务的操作，该操作可以使用文件名、目标和任何其他所需的操作细节来设置状态。该函数将返回新状态。将此减速器称为 START_MOVE。

在您的效果中，注意 START_MOVE，获取包含交易详细信息的状态，然后执行交易的第一部分。完成后，将具有更新状态的操作分派给 MOVE_2 或更具描述性的内容。

这个reducer用下一步需要的细节设置状态，返回它。

效果监视 MOVE_2，然后执行事务的第二阶段。完成后，调度 MOVE_3。作为一个函数，它只是为第三部分设置状态，效果获取详细信息并完成交易。完成后，调度 MOVE_SUCCESS 以使用新文件名或其他设置状态。

如果过程中的任何点出现错误，都可以分派 MOVE_ERROR，并以类似的方式进行清理或返回初始状态。或 MOVE_CANCEL（如果需要）。

组件可以观察状态并将状态更新给用户。

【讨论】：