Question

我对使用React感到相当舒服但我对使用Redux时正确的方法感到困惑。那里的每个人似乎都是以自己的方式做事。在按钮上单击我在React视图中调用方法，如：

handleClick(value) {
  this.props.action.handleValueChange(value);
}

现在我想在这个按钮点击上做更多的事情。那么我应该在触发操作中还是在handleClick方法本身中执行这些操作？

handleClick(value) {
  this.props.action.handleValueChange(value);
  // is this fine?
  if(this.props.someValue === "somethign")
    this.props.action.fetchSomeData(value);
}

我也可以使用thunk并在动作创建器本身中执行此操作，但是这样做的推荐方法是什么？

Answer 1

从单一责任和纯粹功能的角度来考虑它。该方法应该处理点击并将其转换为下一个箍，就像在接力赛中传递接力棒一样。单击可以导致操作或发出状态更改信号。你可以注意到当你开始使用这个词的时候事情变得过于沉重的时候（这就像你的蝙蝠侠信号模块化）：

获取用户输入
并将其保存到组件状态
并致电行动创作者
并获得回复
并将其保存到某个新状态
并重新渲染视图

考虑为你需要完成的每件事做一件“愚蠢”的功能。他们居住的地方取决于你。它与您记得学习数据库调用和“哑模型”时的逻辑相同，它们不关心您对数据的处理方式，它们只是得到了他们所要求的内容。给他们输入，比如“获取用户ID 1337”，他们回复“here {}”或“no”。他们有一个责任，如果你重构他们周围的一切，他们就会坚持下去，直到“让用户通过id”已经不够了。

如果你的目标是纯粹，这将使你的应用程序很好地模块化。它可以在你的班级中显示为很好的分段方法，或者你可以导入每个函数。如果你想进一步阅读，你将从有关函数式编程的高级文章和视频中获得很多。倾听对他们重要的事情。您会注意到它允许很好的模块化架构，其中包含许多可重复使用的小块代码。它是功能性组合物，但它也是物体组成。这些东西在React中也从未如此相关，因为如果您想要在一个类中创建整个应用程序，可以：）

Redux-thunk适合因为它是app级别的状态。还有组件级状态，而不仅仅是容器状态。当你将道具传递给一个愚蠢的组件时，它会将这些道具作为它的“状态”，所以就像孩子＃2一样。我相信你现在正在考虑等级制度。如果您从一个维度步入另一个维度，那么您的逻辑可能会过度扩展。也许逻辑可以询问它需要什么，并且一个单独的处理程序可以将处理程序加入其数据。

我想说的是，我不会直观地查看handleClick内部，以便在数据从数据库返回时找到一些事件监听器。任何超过50-100行的东西都会变得非常野蛮，并且需要经常阅读。如果你以后回来并将顶部连接到底部，其他人可能会称之为spaghetti，但是如果每个事件每个操作每个函数有一个文件（每个函数都有一个作业，每个对象都有一个目的）它们就不能）。

我不是说它必须与此类似。我只是说模块化是王道，因为它可以轻松扩展，维护和重构。当我看到你的代码时，我需要吸收和预加载我的短期记忆越少，我就会越喜欢它。

这是我的意见所喜欢的示例目录树，我希望说明一种思考方式，而不是一个确切的解决方案：

components/
    auth/
        auth_actions.js
        auth_types.js
        auth_reducer.js
        LoadingSpinner.js
        LoginForm.js
        SignupForm.js
        SplashScreen.js
queries/
    mongodb_checkIfEmailExists.js
    mongodb_getUserById.js
    neo4j_getUserByNodeId.js

现在，假设你的朋友正在与你合作。您正在登录视图上工作，她正在使用仪表板视图。在同时工作时，您不会遇到任何文件冲突。一旦你查看文件，你也可能非常清楚发生了什么。您还会注意到，所有导入都是./Something而不是../../../actions。

我希望这可以说明思维方式而不是确切的解决方案。

在使用Redux时，在React视图中保留一些条件代码是否是反模式？

1 个答案: