javascript - Ngrx/store - 使用类的 Action 创建者与使用工厂功能的 Action 创建者?

标签 javascript angular reactjs react-redux ngrx

我是 Ngrx/Store 的新手,所以在学习这种 redux 模式方法的过程中,我遇到了可以创建 Action 的 Action 创建器,这可以通过多种方式完成:

1) 通过类创建 Action 。

class OrderFood implements Action {
readonly type = OrderActionTypes.ORDER_FOOD;
readonly payload: { dish: string };
constructor(dish: string) {
this.payload = { dish };
 }
}

然后为了分派(dispatch)我们必须创建该类的新实例的操作:

this.store.dispatch(new OrderFood ({ dish: 'spaghetti carbonara' }));

2) 通过工厂函数创建 Action 。

函数根据函数的输入返回 Action 对象并设置类型。

const orderFood = ({ dish }: { dish: string }) => ({
type: OrderActionTypes.ORDER_FOOD,
payload: { dish }
});

然后再次调度我们调用函数的 Action :

this.store.dispatch(orderFood({ dish: 'spaghetti carbonara' }));

所以我的问题是在这两种方式中,哪一种是创建 Action 最有效的方式,它们之间有什么区别?

非常感谢您的帮助。

最佳答案

它们做的事情完全一样,唯一的区别是 Action 是通过类还是通过函数创建的。

我们目前正在研究使工厂函数方法成为 NgRx 中的一流成员 - 有关更多信息,请参阅 https://github.com/ngrx/platform/pull/1570

关于javascript - Ngrx/store - 使用类的 Action 创建者与使用工厂功能的 Action 创建者?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55334851/

相关文章:

javascript - 如果子组件的 props 没有改变,React 还会重新渲染它吗?

javascript - Material-ui 'createSvgIcon' 未从 '@material-ui/core/utils' 导出

javascript - featherlight.js 背景和关闭按钮 css?

javascript - Angular如何使用点击功能根据国家/地区名称提取并显示特定的JSON数据

javascript - 为什么克隆 Django 内联表单集会生成具有相似 ID 和名称的表单?

html - 工具提示隐藏在溢出滚动/自动容器上

angular - 如何在 Angular 9 中将分页与 Observables 和 AsyncPipe 结合起来?

javascript - React Component 的 onClick 处理程序未绑定(bind)到 "this"

javascript - 基本域的 Document.referrer

javascript - 检测 HTML5 视频音量属性是否为只读?