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

Reactjs redux sagas回调(又名sagas和setState),reactjs,redux,react-redux,redux-saga,Reactjs,Redux,React Redux,Redux Saga,我想在用户提交表单时设置表单加载状态(微调器图标,禁用输入),并在操作完成或失败时清除该状态。目前,我正在我的商店中存储此状态,这涉及到创建动作创建者和减缩器,这很烦人,原因如下: 这比简单地调用this.setState 这更难推理 我真的不想在我的存储中存储本地组件状态 基本上,我希望在我的表单组件中执行此操作: handleFormSubmitted() { this.setState({ isSaving: true }) this.props.dispatchSaveForm(

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

  • 这比简单地调用
    this.setState
  • 这更难推理
  • 我真的不想在我的存储中存储本地组件状态
  • 基本上,我希望在我的表单组件中执行此操作:

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

    你不能在redux传奇中这样做。你在那里试图做的事违背了redux传奇的基本原则

    redux传奇
    旨在通过将动作视为描述应用程序中发生的事件来应对。。。这样其他传奇(通常是使用
    的“观察者”采取
    )或rootReducer就可以订阅这些操作/事件并执行它们需要做的事情

    正是因为这一点,
    redux传奇
    ——不同于
    redux-thunk
    redux-promise
    - 不会更改
    分派
    方法的行为。。。因此,使用redux saga,当您分派时,您分派,并且reducer和saga被订阅到分派的操作。但是
    dispatch
    方法不会像使用其他中间件/商店增强器时那样返回承诺

    因此,
    redux saga
    让应用程序的其余部分知道表单请求已完成的唯一方法是在请求完成或出现错误时发送操作(使用
    put
    效果),对吗?那么,您怎么可能直接从组件内部知道是否已调度了特定操作

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

    当然,您可以直接访问上下文以获得redux存储,然后可以直接使用,但是侦听器函数不会告诉您调度了什么操作。当一个动作(任何动作)被调度时,它将被调用。。。也许你可以检查一下这个州的某些财产是否发生了变化,但那太疯狂了。所以,除非你想走这条路,这太疯狂了:你不能用redux传奇做到这一点

    如果你想做这样的事情(IMHO不是一个好主意),你必须不使用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 }))
    }
    

    你不能在redux传奇中这样做。你在那里试图做的事违背了redux传奇的基本原则

    redux传奇
    旨在通过将动作视为描述应用程序中发生的事件来应对。。。这样其他传奇(通常是使用
    的“观察者”采取
    )或rootReducer就可以订阅这些操作/事件并执行它们需要做的事情

    正是因为这一点,
    redux传奇
    ——不同于
    redux-thunk
    redux-promise
    - 不会更改
    分派
    方法的行为。。。因此,使用redux saga,当您分派时,您分派,并且reducer和saga被订阅到分派的操作。但是
    dispatch
    方法不会像使用其他中间件/商店增强器时那样返回承诺

    因此,
    redux saga
    让应用程序的其余部分知道表单请求已完成的唯一方法是在请求完成或出现错误时发送操作(使用
    put
    效果),对吗?那么,您怎么可能直接从组件内部知道是否已调度了特定操作

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

    当然,您可以直接访问上下文以获得redux存储,然后可以直接使用,但是侦听器函数不会告诉您调度了什么操作。当一个动作(任何动作)被调度时,它将被调用。。。也许你可以检查一下这个州的某些财产是否发生了变化,但那太疯狂了。所以,除非你想走这条路,这太疯狂了:你不能用redux传奇做到这一点

    如果你想做这样的事情(IMHO不是一个好主意),你必须不使用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 }))
    }
    

    使用redux saga的全部意义在于
    副作用
    ,而不是在这里收听dispatch的响应,您可能应该在store中设置标志,并将标志从store state映射到本地道具,如果需要,还可以渲染微调器。一旦saga完成请求,标志将被重置,商店将被更新,这将触发通过地图功能更新的本地道具,组件将相应更新。阿门@Takahiro!杀了我的一句话是“我真的不想在我的存储中存储本地组件状态”。@Josep,这就是为什么我认为这篇文章被用作反模式的原因。:)提取状态肯定不是
    副作用中的
    本地
    状态
    :-我想是的@Takahiro。。。我是说,别误会我。我认为不使用redux并为表单组件提供一个容器来处理与表单相关的副作用和状态是完全合法的。但是如果你选择了redux和redux传奇。。。那你为什么要这么做?还有,如果有错误怎么办?难道你不想让你的应用程序的其他部分知道这一点吗?如果稍后您还必须禁用请求发生时位于其他位置的按钮,该怎么办?在redux应用程序中:跟踪正在进行的请求不是“本地组件状态”。@Josep,完全同意,你不是w