React,Redux和Redux Saga应用程序中的组件之间共享错误和isFetching

时间:2017-08-03 07:35:13

标签: reactjs react-native redux redux-saga

我有一个使用Redux和Redux Saga的React Native应用程序。我也使用了Ignite启动器中的一种模式,我也曾在许多其他地方看到这种模式,其中州有一个" isFetching"标志和"错误"用于表示API调用的属性以及API调用导致的错误。

我已经在几个地方读过,建议按域或功能拆分Redux商店。我还读到,在组件和Redux文件之间建立1:1关系通常不是一个好主意。

现在,让我们说我的应用程序中有几个屏幕可以进行付款或管理信用卡。所以在我的情况下,我在思考"付款"可能是一个很好的领域。例如,也许我可以使用屏幕A上的信用卡进行支付,并在屏幕B上添加新的信用卡。我有两个传奇来处理这个:一个getCards传奇和makePayment传奇。他们都有相应的"请求" isFetching标志设置为true的操作。从那里,他们各自进行几次API调用,转换数据等,然后用新数据更新PaymentRedux状态。完成后,它们会将isFetching标志更新为false。如果发生错误,它们会使用适当的错误类型更新状态。

但是,一个屏幕的加载指示器或错误状态是否真的与可能在另一个屏幕上启动的结果相关联?例如,如果我的付款由于某种原因在屏幕A上失败,那么我导航到屏幕B,我是否希望屏幕B知道屏幕A上发生的潜在无关错误?

所以我的问题是:

  1. 这对我的Redux州来说是一个合理的分裂 地点?我应该在这样的不同屏幕上分享状态吗?
  2. 我如何处理错误/ isFetching,如果有的话?我会有多个" isFetching"旗帜,每次操作一个?每个屏幕都会订阅他们感兴趣的特定错误类型吗?
  3. 只是想知道推荐的模式是什么。建议将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:0)

我相信你的情况最好将这个减速器分成两部分,所以你会有一个减少付款人和一个creditCards减速器。 creditCards reducer将负责有关添加,删除和修改信用卡的所有数据,而支付减少器将负责支付状态,例如,如果成功,订单号是什么,使用的信用卡等。

这是非常主观的,因为在Redux中没有正确的方法。如果您认为没有必要使用两个减速器,也许您可​​以将减少付款器本身拆分,从而使两个状态在同一减速器上如下:

const INITIAL_STATE = {
  payment: {
    error: null,
    fetching: false,
    ...
  },
  creditCards: {
    error: null,
    fetching: false
  }
}

这样,您只需根据模拟状态的方式实现选择器和操作处理程序。