[英]How to handle state transitions in a React / Flux component
Given I have an AJAX based search field that reacts on user input, requests search results from a backend via AJAX, shows the results in a dropdown below the search field, allows navigation through the search results via cursor keys and reacts on esc
key presses in an intelligent way. 鉴于我有一个基于AJAX的搜索字段对用户输入作出反应,通过AJAX从后端请求搜索结果,在搜索字段下方的下拉列表中显示结果,允许通过光标键浏览搜索结果并对esc
键按下一种聪明的方式。
Since the current Backbone based component is broken in many ways, I'd like to reimplement that search component using React
and maybe Flux
architecture. 由于当前基于Backbone的组件在很多方面被打破,我想使用React
和Flux
架构重新实现该搜索组件。
During planning it turned out, that my component has at least a number of 10 different states (maybe even more), it has to react to actions
triggered by user inputs, and as well to actions
triggered by asynchronous server responses. 在计划过程中,我的组件至少有10个不同的状态(可能更多),它必须对用户输入触发的actions
做出反应,并对异步服务器响应触发的actions
做出反应。
Question1 : Should I model all state in a store
instead of a the parent component? 问题1 :我应该在store
而不是父组件中建模所有状态吗? That meant, that every user input changes the stores state, for example the :searchQuery
, :searchResults
and my parent view component reacts to that state changes? 这意味着,每个用户输入都会更改存储状态,例如:searchQuery
, :searchResults
和我的父视图组件对该状态的变化做出反应?
Question2 : Or should I model all state in the parent component itself and omit a store
, dispatcher
and actions
completely? 问题2 :或者我应该在父组件本身中建模所有状态并完全省略store
, dispatcher
和actions
?
Question3 : Independently from handling state in a store
or in the parent component itself, it turned out, that the component itself can have at least 10 different states, and there should only be a certain number of transitions allowed. 问题3 :事实证明,独立于处理store
或父组件本身的状态,组件本身至少可以有10种不同的状态,并且应该只允许一定数量的转换。 Usually, I'd pull in a statemachine implementation here, model all :states
and allowed :transitions
and execute transitions everytime an action is received by the store
or a callback method is called in the parent component. 通常,我在这里引入一个statemachine实现,模型all :states
和allowed :transitions
每次store
收到一个动作时:transitions
和执行转换,或者在父组件中调用一个回调方法。 What is the correct React way
to handle states
and transitions
between these states
in a component? 处理组件中这些states
之间的states
和transitions
的正确React way
是什么?
Question4 : Which is the to-go-state-of-the-art Flux
implementation for Javascript? 问题4 :Javascript中最先进的Flux
实现是哪一个? I have seen reflux so far, but I'm not sure, that's my poison. 到目前为止,我已经看到了反流 ,但我不确定,这是我的毒药。
I am open to all kind of suggestions here. 我愿意接受各种建议。
I am building a similar component in React
with flux
right now and I have worked with Backbone
extensively in the past so hopefully I give you some insight. 我现在正在使用flux
在React
构建类似的组件,过去我曾与Backbone
一起工作过,所以我希望能给你一些见解。
My guess is that your Backbone
solution had a model local to your search view that built :searchQuery
when the field(s) were updated. 我的猜测是你的Backbone
解决方案在你的搜索视图中有一个本地模型,它建立了:searchQuery
在更新字段时的:searchQuery
。 On the ajax callback you most likely just directly updated the :searchResults
. 在ajax回调中,您很可能只是直接更新了:searchResults
。
1-2: 1-2:
With flux
there ends up being a bit more boilerplate code, but in my experience if I don't build a store to start with I always regret it. 有了flux
,最终会有更多的样板代码,但根据我的经验,如果我不建立一个商店开始我总是后悔。 That being said I would make a SearchStore
for the :searchResults
and keep the :searchQuery
in the state of the parent component. 话虽这么说,我会为:searchResults
创建一个SearchStore
,并将:searchQuery
保持在父组件的状态。
This way when you are ready to call your search you use a view action SearchViewActions.getSearchResults(:searchQuery)
which makes the ajax call and in the callback calls SearchServerActions.receiveSearchResults(:searchQuery, :searchResults)
and updates the store. 这样,当您准备调用搜索时,您可以使用视图操作SearchViewActions.getSearchResults(:searchQuery)
进行ajax调用,并在回调中调用SearchServerActions.receiveSearchResults(:searchQuery, :searchResults)
并更新商店。 Then your results component can listen for Store
changes and call SearchStore.getResults()
when it sees the change. 然后,您的结果组件可以侦听Store
更改,并在看到更改时调用SearchStore.getResults()
。 This helps modularize the two sub-components, where as option 2 would tightly couple the two components and make it harder for outside component reuse. 这有助于模块化两个子组件,其中选项2将两个组件紧密耦合,并使外部组件重用变得更加困难。
3: 3:
I like your solution of the state-machine, that you can just ask if you are allowed to make a transition and return a set of properties to update or a function to execute call setState({...})
based on that information. 我喜欢你的状态机的解决方案,你可以问你是否允许进行转换并返回一组要更新的属性,或者根据该信息执行调用setState({...})
的函数。
4: 4:
Reflux looks great, as it seems to reduce the boilerplate quite a bit. 反流看起来很棒,因为它似乎减少了样板。 Reflux may or may not perform as well as stock Flux
however. 然而,回流可能会或可能不会像股票Flux
那样表现。
Let me know how it goes, as your strategy may help me improve my structure. 让我知道它是怎么回事,因为你的策略可以帮助我改善我的结构。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.