Javascript React-Redux：是否应将所有组件状态保存在 Redux Store 中

React-Redux: Should all component states be kept in Redux Store

提问by l2silver

Say I have a simple toggle:

假设我有一个简单的切换：

When I click the button, the Color component changes between red and blue

当我单击按钮时，颜色组件在红色和蓝色之间变化

I might achieve this result by doing something like this.

我可能会通过做这样的事情来达到这个结果。

index.js

索引.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

容器.js

connect(mapStateToProps)(indexPage)

action_creator.js

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

reducer.js

减速器.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

but this is a hell of a lot of code to write for something that I could have achieved in 5 seconds with jQuery, some classes, and some css...

但这是一大堆代码，我可以在 5 秒内用 jQuery、一些类和一些 css 来实现......

So I guess what I'm really asking is, what am I doing wrong here?

所以我想我真正要问的是，我在这里做错了什么？

回答by Tim Dorr

Redux is primarily intended for "application state." That is, anything related to your application logic. The view built on top of it is a reflection of that state, but does not have to exclusively use that state container for everything it does.

Redux 主要用于“应用程序状态”。也就是说，任何与您的应用程序逻辑相关的东西。建立在它之上的视图是该状态的反映，但不必专门使用该状态容器来完成它所做的一切。

Simply ask these questions: Is this state important to the rest of the application? Will other parts of the application behave differently based on that state? In many minor cases, that will not be the case. Take a drop down menu: The fact that it's open or closed probably won't have an effect on other parts of the app. So, wiring it up to your store is probably overkill. It's certainly a valid option, but doesn't really net you any benefits. You're better off using this.stateand calling it a day.

只需问以下问题：此状态对应用程序的其余部分重要吗？应用程序的其他部分是否会根据该状态表现不同？在许多小情况下，情况并非如此。拿一个下拉菜单：它打开或关闭的事实可能不会对应用程序的其他部分产生影响。因此，将其连接到您的商店可能有点矫枉过正。这当然是一个有效的选择，但并没有真正为您带来任何好处。你最好使用this.state它并结束它。

In your particular example, does the color that button is toggled to make any difference in other parts of the application? If it's some sort of global on/off toggle for a major part of your application, it definitely belongs in the store. But if you're just toggling a button color when you click the button, you can leave the color state locally-defined. The action of clicking the button might have other effects that require an action dispatch, but that is separate from the simple question of what color it should be.

在您的特定示例中，切换按钮的颜色是否对应用程序的其他部分产生任何影响？如果它是应用程序主要部分的某种全局开/关切换，那么它绝对属于商店。但是，如果您在单击按钮时只是切换按钮颜色，则可以保留本地定义的颜色状态。单击按钮的动作可能有其他需要动作分派的效果，但这与它应该是什么颜色的简单问题是分开的。

In general, try to keep your application state as small as possible. You don't have to shove everythingin there. Do it when you have to or it makes a lot of sense to keep something there. Or if it makes your life easier when using Dev Tools. But don't overload its importance too much.

一般来说，尽量让你的应用程序状态尽可能小。你不必把所有东西都塞进去。在必要时这样做，或者在那里保留一些东西很有意义。或者，如果使用开发工具让您的生活更轻松。但不要过分强调它的重要性。

回答by chuck911

Redux FAQ: Organizing State
this part of redux official doc well answered your question.

Redux FAQ：Organizing State
这部分 redux 官方文档很好地回答了你的问题。

Using local component state is fine. As a developer, it is your job to determine what kinds of state make up your application, and where each piece of state should live. Find a balance that works for you, and go with it.

Some common rules of thumb for determining what kind of data should be put into Redux:

• Do other parts of the application care about this data?
• Do you need to be able to create further derived data based on this original data?
• Is the same data being used to drive multiple components?
• Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
• Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?

使用本地组件状态很好。作为开发人员，您的工作是确定构成您的应用程序的状态类型以及每个状态的位置。找到一个适合你的平衡点，然后坚持下去。

确定应该将哪种数据放入 Redux 的一些常见经验法则：

• 应用程序的其他部分是否关心这些数据？
• 您是否需要能够基于这些原始数据创建进一步的派生数据？
• 是否使用相同的数据来驱动多个组件？
• 能够将这种状态恢复到给定的时间点（即时间旅行调试）对您是否有价值？
• 您是否要缓存数据（即，如果它已经存在，则使用它的状态而不是重新请求它）？

回答by ptim

For the purpose of highlighting the great link provided by @AR7, and because that link moved a while back:

为了突出@AR7 提供的重要链接，并且因为该链接移动了一段时间：

Use React for ephemeral state that doesn't matter to the app globally and doesn't mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.

Sometimes you'll want to move from Redux state to React state (when storing something in Redux gets awkward) or the other way around (when more components need to have access to some state that used to be local).

The rule of thumb is: do whatever is less awkward.

Dan Abramov: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

将 React 用于与全局应用无关且不会以复杂方式变异的临时状态。例如，某个 UI 元素中的切换、表单输入状态。将 Redux 用于全局重要或以复杂方式变异的状态。例如，缓存的用户或帖子草稿。

有时你会想要从 Redux 状态移动到 React 状态（当在 Redux 中存储一些东西变得尴尬时）或者相反（当更多组件需要访问一些曾经是本地的状态时）。

经验法则是：做任何不那么尴尬的事情。

丹·阿布拉莫夫：https: //github.com/reactjs/redux/issues/1287#issuecomment-175351978

回答by kumar303

Yes, it's worth striving to store all component state in Redux. If you do, you will benefit from many features of Redux like time travel debugging and replayable bug reports. If you don't, those features could be completely unusable.

是的，努力将所有组件状态存储在 Redux 中是值得的。如果这样做，您将受益于 Redux 的许多功能，例如时间旅行调试和可重播的错误报告。如果不这样做，这些功能可能完全无法使用。

Any time you do notstore a component state change in Redux, that change is completely lost from the stack of Redux changes and your application UI will be out of sync with the store. If this is not important to you then ask yourself why use Redux at all? Your application will be less complex without it!

任何时候您不在Redux 中存储组件状态更改，该更改都会从 Redux 更改堆栈中完全丢失，并且您的应用程序 UI 将与存储不同步。如果这对你来说不重要，那么问问自己为什么要使用 Redux？没有它，您的应用程序将不那么复杂！

For performance reasons, you may wish to fall back to this.setState()for anything that would dispatch many actions repeatedly. For example: storing the state of an input field in Redux each time the user types a key may result in poor performance. You can solve this by treating it like a transaction: once the user action is "committed," save the final state in Redux.

出于性能原因，您可能希望回退到this.setState()任何会重复调度许多操作的东西。例如：每次用户键入一个键时，将输入字段的状态存储在 Redux 中可能会导致性能不佳。您可以通过将其视为事务来解决此问题：一旦“提交”用户操作，将最终状态保存在 Redux 中。

Your original post mentions how the Redux way is a "hell of a lot of code to write." Yes but you can use abstractions for common patterns such as local component state.

您的原始帖子提到了 Redux 方式是如何“编写大量代码的地狱”。是的，但您可以对常见模式（例如本地组件状态）使用抽象。