模型助手在React/Flux中属于什么位置? [英] Where do model helpers belong in React/Flux?
问题描述
在试图将我的大脑包裹在React和Flux上的同时，我很难决定将所谓的模型助手"方法放在哪里有意义.
While attempting to wrap my brain around React and Flux, I am having a hard time deciding where it makes sense to put what I'd call "model helper" methods.
例如，假设商店中包含一个"Person"实体，并且给定"Person"具有"first name"和"last name"，那么在最合理的位置放置"full"名称"的辅助方法，将两者简单地串联在一起?我的直觉说，最好在商店内使用全名"，但不确定.如果是这样，是在商店中更新此值的Action还是应该在商店本身中计算该值?
For example, given a situation where there is a "Person" entity contained within a Store, and given that Person has a "first name" and a "last name", where would the most logical place to put a "full name" helper method that simply concatenates the two together? My gut says that it would be best to have "full name" be within the Store, but am not sure. And if so, would it be an Action that updates this value in the store, or should it be computed within the Store itself?
有没有可以放置这种功能的地方?
Is there an accepted place to put this kind of functionality?
谢谢！
推荐答案
要使事情易于管理，尤其是当您拥有许多商店和大型组件树时，请尝试着重于商店和组件的功能:
To keep things manageable, especially if you get many stores and a large component tree, try to focus functions of your stores and components:
- 存储用于a)存储数据(名字，姓氏，不是派生数据)，以及b)为组件提供数据(包括派生数据).
- 组件用于将a)数据呈现给用户，以及b)锚点以与数据进行交互.
我会尽量避免在组件树中处理数据.并建议任何组件中的任何数据道具始终源自商店.它们是从较高的组件中传递下来的，但并未沿途对其进行操纵.
I would try to avoid manipulating data inside the component tree. And would advise that any data props in any component always originate from a store. They are passed down from higher components, but not manipulated along the way.
如果辅助功能仅处理数据(例如，计算一组中的总人数)，请将其放在商店中. 如果它们处理表示逻辑(例如，页面上第一人称的字体大小应该更大)，请将其放在单独的位置.我将它们放在单独的实用程序中进行导入. 但是只能在最低的组件上调用这些函数.
If helper functions deal with data only (eg calculating total number of persons in a group), put them in a store. If they deal with presentation logic (e.g. font size of first person on the page should be larger), put them in a separate place. I put them in separate utilities to import. But call these functions only at the lowest possible component.
这样，您的代码将保持可维护性.
That way, your code stays much more maintainable.
数据助手和表示逻辑之间有很多灰色区域，因此在这种情况下的选择很难说.但是，只要您始终如一地应用自己的逻辑，代码就可以保持可管理性.
There is a lot of grey area between data helpers and presentation logic, so your choice in this case is hard to say. But as long as you apply your own logic consistently, your code stays manageable.
这样，当组件给您带来问题时，将更容易将props追溯到其源代码或应用于组件中这些props的功能代码.
That way, when a component gives you issues, it will be easier to trace props to their source, or the function code that was applied to those props in your component.
所以也许具有全名功能的高阶组件，但我不会让高阶组件创建新道具.
So maybe a higher order component with a full name function, but I would not have the higher order component create a new prop.
这篇关于模型助手在React/Flux中属于什么位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
