正确的方式来听取/对redux应用程序上的特定操作作出反应

我正在使用Angular和ngrx编写我的第一个redux应用程序。有几次，我发现自己对如何正确“连接”一系列行为有疑问。我举个例子。正确的方式来听取/对redux应用程序上的特定操作作出反应

我的应用程序有一个客户列表面板和一个客户详细面板，当用户选择一个特定的客户我想要详细面板显示客户信息，但也想隐藏客户列表面板。

当前我正在调度一个CustomerSelected动作，该动作触发从服务器加载客户详细信息的效果（副作用）。当细节被加载时，我发送一个CusomerDetailLoaded动作，它用客户信息更新商店。它也会触发一个效果，调度隐藏客户列表面板的动作HideCustomerList。

这是可以接受的还是有更好的方法来实现这个？特别是我觉得CustomerDetailLoaded现在与布局细节紧密结合在一起，我们一直加载客户细节，我们也隐藏了客户列表面板......听起来对我来说是一个错误。

感谢，加布

来源

2017-10-15 gabric

真的不熟悉Angular或ngrx，但在React + Redux世界中，您可以在mapDispatchToProps中执行此“更清洁”操作。无论何时您需要几次同时发生的行动，这都是正确的地方，否则就无关紧要。 – timotgl

redux-observable库提供了很好的方式收听具体的行动和后派遣另一行动。

例如，如果你想ACTION_A后派遣ACTION_B，你可以做这样的事情：

const rootEpic = (action$) => action$.ofType('ACTION_A').mapTo({ 
    type: 'ACTION_B' 
});

接下来，如果你想ACTION_B后派遣ACTION_C，你可以使用combineEpics帮手：

const epicA = (action$) => action$.ofType('ACTION_A').mapTo({ 
    type: 'ACTION_B' 
}); 
const epicB = (action$) => action$.ofType('ACTION_B').mapTo({ 
    type: 'ACTION_C' 
}); 
const rootEpic = combineEpics(
    epicA, 
    epicB 
)

看看他们的documentation了解更多信息。

来源

2017-10-16 09:54:29 1ven

redux-observable看起来与ngrx效果非常相似https://github.com/ngrx/platform/tree/master/docs/effects。因此，效果似乎是管理这些动作序列的正确场所。 – gabric

正确的方式来听取/对redux应用程序上的特定操作作出反应

回答

相关问题