React-Redux：是否应该将所有组件状态保存在 Redux Store 中
React-Redux: Should all component states be kept in Redux Store
假设我有一个简单的切换：
当我点击按钮时，Color 组件在红色和蓝色之间变化
我可能会通过这样做来达到这个结果。
index.js
Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red
container.js
connect(mapStateToProps)(indexPage)
action_creator.js
function changeColor(){
return {type: 'CHANGE_COLOR'}
}
reducer.js
switch(){
case 'CHANGE_COLOR':
return {color: true}
但是要编写一些我本可以在 5 秒内用 jQuery、一些 类 和一些 css 实现的代码，实在是太麻烦了。 .
所以我想我真正想问的是，我在这里做错了什么？
Redux 主要用于 "application state." 也就是说，任何与您的应用程序逻辑相关的东西。建立在它之上的视图是该状态的反映，但不必为它所做的一切专门使用该状态容器。
简单地问这些问题：这个状态对应用程序的其余部分重要吗？应用程序的其他部分是否会根据该状态表现不同？在许多轻微的情况下，情况并非如此。以下拉菜单为例：它打开或关闭的事实可能不会对应用程序的其他部分产生影响。因此，将其连接到您的商店可能有点矫枉过正。这当然是一个有效的选择，但并不能真正为您带来任何好处。您最好使用 this.state 并结束它。
在您的特定示例中，切换按钮的颜色是否会对应用程序的其他部分产生影响？如果它是应用程序主要部分的某种全局 on/off 切换，它绝对属于商店。但是，如果您只是在单击按钮时切换按钮颜色，则可以保留本地定义的颜色状态。单击按钮的动作可能会产生其他需要动作调度的效果，但这与它应该是什么颜色的简单问题是分开的。
一般来说，尽量让您的应用程序状态尽可能小。您不必将 所有内容 都塞进去。必要时做，或者把东西放在那里很有意义。或者在使用开发工具时是否让您的生活更轻松。但不要过分强调它的重要性。
为了突出@AR7 提供的伟大 link，并且因为那个 link 移动了一段时间：
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
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 中是值得的。如果这样做，您将受益于 Redux 的许多功能，例如时间旅行调试和可重放的错误报告。如果不这样做，这些功能可能完全无法使用。
只要您不在 Redux 中存储组件状态更改，该更改就会从 Redux 更改堆栈中完全丢失，并且您的应用程序 UI 将会退出与商店同步。如果这对你不重要，那么问问自己为什么要使用 Redux？没有它，您的应用程序将变得不那么复杂！
出于性能原因，您可能希望回退到 this.setState() 来处理任何会重复分派许多操作的事情。例如：每次用户键入一个键时，将输入字段的状态存储在 Redux 中可能会导致性能不佳。您可以通过将其视为事务来解决此问题：一旦用户操作 "committed," 在 Redux 中保存最终状态。
你原来的 post 提到了 Redux 的方式 "hell of a lot of code to write." 是的，但是你可以使用抽象来实现通用模式，例如本地组件状态。
这就是 Redux 的问题，开发人员过度设计状态设计，这总是将相当简单的应用程序变成复杂的结构。
对我来说，Redux 是一个 React 架构，在实施之前应该好好计划和设计。
https://kentcdodds.com/blog/application-state-management-with-react/
“redux 如此成功的原因之一是 react-redux 解决了 Prop-Drilling 问题。只需将您的组件传递到某个神奇的连接函数中，您就可以在树的不同部分共享数据这一事实非常棒。其使用reducers/actioncreators/etc。也很棒，但我相信 redux 的无处不在是因为它解决了开发人员的 Prop-Drilling 痛点。
这就是我只在一个项目中使用 redux 的原因：我一直看到开发人员将他们所有的状态都放入 redux 中。不仅是全局应用程序状态，还有本地状态。这会导致很多问题，其中最重要的是当您维护任何状态交互时，它涉及与 reducer、action creators/types 和 dispatch 调用的交互，最终导致不得不打开许多文件并在脑海中追踪代码，弄清楚发生了什么以及它对代码库的其余部分有什么影响。 “”
假设我有一个简单的切换：
当我点击按钮时，Color 组件在红色和蓝色之间变化
我可能会通过这样做来达到这个结果。
index.js
Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red
container.js
connect(mapStateToProps)(indexPage)
action_creator.js
function changeColor(){
return {type: 'CHANGE_COLOR'}
}
reducer.js
switch(){
case 'CHANGE_COLOR':
return {color: true}
但是要编写一些我本可以在 5 秒内用 jQuery、一些 类 和一些 css 实现的代码，实在是太麻烦了。 .
所以我想我真正想问的是，我在这里做错了什么？
Redux 主要用于 "application state." 也就是说，任何与您的应用程序逻辑相关的东西。建立在它之上的视图是该状态的反映，但不必为它所做的一切专门使用该状态容器。
简单地问这些问题：这个状态对应用程序的其余部分重要吗？应用程序的其他部分是否会根据该状态表现不同？在许多轻微的情况下，情况并非如此。以下拉菜单为例：它打开或关闭的事实可能不会对应用程序的其他部分产生影响。因此，将其连接到您的商店可能有点矫枉过正。这当然是一个有效的选择，但并不能真正为您带来任何好处。您最好使用 this.state 并结束它。
在您的特定示例中，切换按钮的颜色是否会对应用程序的其他部分产生影响？如果它是应用程序主要部分的某种全局 on/off 切换，它绝对属于商店。但是，如果您只是在单击按钮时切换按钮颜色，则可以保留本地定义的颜色状态。单击按钮的动作可能会产生其他需要动作调度的效果，但这与它应该是什么颜色的简单问题是分开的。
一般来说，尽量让您的应用程序状态尽可能小。您不必将 所有内容 都塞进去。必要时做，或者把东西放在那里很有意义。或者在使用开发工具时是否让您的生活更轻松。但不要过分强调它的重要性。
为了突出@AR7 提供的伟大 link，并且因为那个 link 移动了一段时间：
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
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 中是值得的。如果这样做，您将受益于 Redux 的许多功能，例如时间旅行调试和可重放的错误报告。如果不这样做，这些功能可能完全无法使用。
只要您不在 Redux 中存储组件状态更改，该更改就会从 Redux 更改堆栈中完全丢失，并且您的应用程序 UI 将会退出与商店同步。如果这对你不重要，那么问问自己为什么要使用 Redux？没有它，您的应用程序将变得不那么复杂！
出于性能原因，您可能希望回退到 this.setState() 来处理任何会重复分派许多操作的事情。例如：每次用户键入一个键时，将输入字段的状态存储在 Redux 中可能会导致性能不佳。您可以通过将其视为事务来解决此问题：一旦用户操作 "committed," 在 Redux 中保存最终状态。
你原来的 post 提到了 Redux 的方式 "hell of a lot of code to write." 是的，但是你可以使用抽象来实现通用模式，例如本地组件状态。
这就是 Redux 的问题，开发人员过度设计状态设计，这总是将相当简单的应用程序变成复杂的结构。
对我来说，Redux 是一个 React 架构，在实施之前应该好好计划和设计。
https://kentcdodds.com/blog/application-state-management-with-react/ “redux 如此成功的原因之一是 react-redux 解决了 Prop-Drilling 问题。只需将您的组件传递到某个神奇的连接函数中，您就可以在树的不同部分共享数据这一事实非常棒。其使用reducers/actioncreators/etc。也很棒，但我相信 redux 的无处不在是因为它解决了开发人员的 Prop-Drilling 痛点。
这就是我只在一个项目中使用 redux 的原因：我一直看到开发人员将他们所有的状态都放入 redux 中。不仅是全局应用程序状态，还有本地状态。这会导致很多问题，其中最重要的是当您维护任何状态交互时，它涉及与 reducer、action creators/types 和 dispatch 调用的交互，最终导致不得不打开许多文件并在脑海中追踪代码，弄清楚发生了什么以及它对代码库的其余部分有什么影响。 “”