redux-sagas回调（又名sagas和setState）

Question

我想在用户提交表单时设置表单加载状态（旋转图标，禁用输入），并在操作完成或失败时清除该状态。当前，我将这种状态存储在我的商店中，这涉及创建动作创建者和简化器，由于以下几个原因，这很烦人：

1. 不仅仅是打电话，还需要做更多的工作 this.setState
2. 很难推理
3. 我真的不想在我的商店中存储本地组件状态

本质上，我想在表单组件中执行此操作：

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

Answer 1

您无法使用redux-saga做到这一点。您在那里尝试做的事情违反了redux-saga的基本原则。

redux-saga旨在通过处理诸如描述您的应用程序中发生的事件之类的动作来做出反应...，以便其他sagas（通常是使用的“观察者” take）或rootReducer可以订阅这些动作/事件并执行他们需要做的事情...

因此- 与- redux-saga不同redux-thunk，redux-promise-不会改变dispatch方法的行为...因此，使用redux saga进行分派时，就可以分派，并且reducers和sagas都订阅了分派的动作。但是该dispatch方法不会像在使用其他中间件/商店增强器时那样返回承诺。

因此，redux-saga必须让应用程序的其余部分知道表单请求已完成的唯一方法是，put只要该请求完成或出错，就调度一个动作（使用效果），对吗？因此，您如何直接从组件内部知道是否已分派特定的操作？

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

当然，您可以直接访问上下文以保留您的redux存储，然后可以直接使用redux subscribe方法，但是listener函数不会告诉您调度的操作是什么。当一个动作（任何动作）被派发时，它只会被调用……也许您可以检查状态的某些属性是否已更改，但这太疯狂了。因此，除非您想走那条路，否则这很疯狂：您无法使用redux-saga做到这一点。

如果您想做类似的事情（恕我直言，这不是一个好主意），则必须在不使用redux-saga的情况下进行。一种可能的方法可能是：

handleFormSubmitted() {
  this.setState({ isSaving: true })
  yourFetchCall({ formData: this.props.formData })
    .then(payload => this.props.dispatchFormSaved(payload))
    .catch(error => this.props.dispatchSavingFormErrored(error))
    .finally(() => this.setState({ isSaving: false }))
}