redux-sagas回调(又名sagas和setState)

时间:2017-04-12 02:42:30

标签: reactjs redux react-redux redux-saga

我想在用户提交表单时设置表单加载状态(微调器图标,禁用输入),并在操作完成或失败时清除该状态。目前我将这个状态存储在我的商店中,这涉及创建一个动作创建器和减速器,这有点烦人,原因如下:

  1. 这比简单地调用this.setState
  2. 要多得多
  3. 理由更难
  4. 我真的不想在我的商店中存储本地组件状态
  5. 基本上我想在我的表单组件中执行此操作:

    handleFormSubmitted() {
      this.setState({ isSaving: true })
      this.props.dispatchSaveForm({ formData: this.props.formData })
        .finally(() => this.setState({ isSaving: false }))
    }
    

1 个答案:

答案 0 :(得分:4)

你不能用redux-saga做到这一点。你在那里尝试做的事情违背了redux-saga的基本原则。

0旨在通过处理描述您的应用中发生的事件的动作来实现反应......所以其他传奇(通常是使用redux-saga的“观察者”)或rootReducer可以订阅这些行动/事件并做他们需要做的事情......

因为take -unlike redux-sagaredux-thunk -  不会改变redux-promise方法的行为......因此,当您调度时使用redux saga,您可以调度,并且reducers和sagas将订阅已分派的操作。但dispatch方法不会返回使用其他中间件/存储增强器时发生的承诺。

因此,dispatch必须让应用程序的其余部分知道表单请求已完成的唯一方法是在请求完成时调度操作(使用redux-saga效果)或错误,对吧?那么,如果已经调度了特定的动作,你怎么可能直接从组件内部知道呢?

除非您使用连接器组件制作自己的中间件(或使用单独的中间件):否则无法订阅组件内的具体操作。

当然,您可以直接访问上下文以获取您的redux存储,然后您可以直接使用the redux subscribe method,但是侦听器函数不会告诉您调度的操作是什么。当一个动作(任何动作)被调度时它将被调用...也许你可以检查状态的某些属性是否已经改变,但那是疯了。所以,除非你想沿着那条路走下去,这很疯狂:你不能用redux-saga做到这一点。

如果你想做那样的事情(恕我直言并不是一个好主意)你将不必使用redux-saga。可能的方法可能是:

put