React-Redux:应该将所有组件状态保存在Redux Store中 [英] React-Redux: Should all component states be kept in Redux Store

问题描述

说我有一个简单的切换按钮:

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

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

container.js

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

action_creator.js

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

reducer.js

reducer.js

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

但这是很多代码的地狱，我可以用jQuery，一些类和一些CSS在5秒钟内完成一些事情.

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...

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

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

推荐答案

Redux主要用于应用程序状态".也就是说，任何与您的应用程序逻辑有关的内容.建立在该状态之上的视图是该状态的反映，但不必为该状态所做的一切独占使用该状态容器.

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.

简单地问以下问题:此状态对应用程序的其余部分是否重要?应用程序的其他部分是否会基于该状态而有所不同?在许多较小的情况下，情况并非如此.采取下拉菜单:打开或关闭的事实可能不会对应用程序的其他部分产生影响.因此，将其连接到您的商店可能是过大的选择.这当然是一个有效的选择，但并没有真正给您带来任何好处.最好使用this.state并每天调用它.

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.state and calling it a day.

在您的特定示例中，切换按钮的颜色是否会对应用程序的其他部分产生影响?如果它是应用程序主要部分的某种全局开/关切换，则它肯定属于商店.但是，如果您只是在单击按钮时切换按钮颜色，则可以将颜色状态保留为本地定义.单击按钮的动作可能还具有其他需要动作分派的效果，但这与应该使用哪种颜色这一简单的问题是分开的.

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 everything in 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.

这篇关于React-Redux:应该将所有组件状态保存在Redux Store中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！