2017-04-12 100 views
0

我想设置形式加载状态(旋转的图标,禁止输入),当用户提交表单,动作完成或失败时清除该状态。目前我储存在我的商店,其中包括创建一个行动的创建者和减速,这是烦人的几个原因这种状态:终极版 - 传奇回调(又名传奇和的setState)

  1. 这是一个很大更多的工作不是简单地调用this.setState
  2. 它的道理更加困难约
  3. 我真的不希望存储在我的商店本地组件的状态

基本上我想我的表单组件内做到这一点:

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

使用终极版传奇的整点是关于'侧effects',在这里听从调度响应的代替,你应该设定标志商店,并将旗帜从商店状态映射到当地道具,并根据需要渲染微调。一旦传奇完成请求,标志将被重置并且商店将被更新,这将触发通过你的地图功能更新的本地道具,并且组件将被相应地更新。 – Takahiro

+0

amen @Takahiro!杀死我的句子是“我真的不想将本地组件状态存储在我的商店中”。 – Josep

+0

@Josep,这就是为什么这篇文章被用作反模式,我想。 :)获取状态绝对不是“副作用”中的“本地”状态。 :-p – Takahiro

回答

2

你不能做到这一点与终极版 - 传奇。你在那里试图做的事违背了redux-saga的基本原则。

redux-saga旨在通过处理类似事件的描述发生了什么事在你的应用程序的行为是被动。所以,其他传奇(通常为“观察家”使用take)或rootReducer可以订阅到那些动作/事件和做什么,他们需要做的......

正因为如此redux-saga -unlike redux-thunkredux-promise - 当你派遣,你发送和减速器不改变dispatch方法的行为......所以,与终极版传奇和传奇故事订阅了派遣的行动。但是喜欢它,当你使用其他中间件/存储增强剂发生在dispatch方法将不会返回一个承诺。

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

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

当然,您可以直接访问上下文以获取您的redux存储库,然后您可以直接使用the redux subscribe method,但侦听器函数不会告诉您分配的操作是什么。当一个动作(任何动作)被分派它只会被调用......也许,如果国家的某些属性发生了变化,你可以检查,但是这太疯狂了。所以,除非你想要走这条路线,这是疯狂的:你不能这样做,使用终极版 - 传奇。

如果你想要做类似的东西(恕我直言,这不是一个好主意),你就必须做到这一点,而无需使用终极版 - 传奇。一种可能的方式做到这一点可能是沿着线的东西:

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 })) 
} 
+0

downvote?真?想知道为什么XD – Josep

+0

@Brett考虑到我已经尽力向你解释这一点。你介意解释你为什么只是低估了我的答案吗? – Josep