你可能并不需要 Redux

AZmake 发布于2019-08-22 18:25 / 784人阅读

摘要：你可能不需要人们经常在他们不需要的时候选择它。将与不需要指定格式代码去更新的方法比较是太正常不过，可以得出结论是复杂的。保持历史可撤销或实现可预见的变化，而不会对编写代码的方式发生重大变化。哇你应该对有状态的组件做这件事吗可能不会。

你可能不需要 Redux

人们经常在他们不需要 Redux 的时候选择它。“如果我们的应用没有使用 Redux 怎么扩展？”，紧接着，开发人员对间接的Redux引入他们的代码感到不满。“为什么我必须引用三个文件才能得到一个简单的功能？” 为什么呢！

我能够理解人们责怪 Redux, React, 函数式编程，不变性和其他许多事情使他们陷入困境。将 Redux 与不需要“指定格式”代码去更新 state 的方法比较是太正常不过，可以得出结论 Redux 是复杂的。在某种程度上来说是的，但是设计如此。

Redux 提供了一个权衡，他要求你：

将应用程序状态描述为普通对象和数组

将系统中的变化描述为普通对象。

将处理更改的逻辑描述为纯函数。

使用 React 或者不适用，这些都不是构建一个应用必要的限制。事实上这些都是很强的限制，在你的应用上使用它之前，你应该仔细考虑清楚。

你有这么做的充分理由吗？

这些限制对我很有吸引力，因为它们可以帮助构建应用程序：

将 state 在本地存储，项目启动开箱即用。

在服务渲染提前写入 state 以 HTML 格式发送到客户端，在客户端启动，开箱即用

序列化用户操作，并将它们与状态快照一起附加到自动化的bug报告中，以便产品开发人员可以重放它们以重现错误。

通过传递 action 对象以实现写作环境，而不会对编写代码的方式发生重大变化。

保持历史可撤销或实现可预见的变化，而不会对编写代码的方式发生重大变化。

在开发过程中往来于 state 历史之间，并在代码更新时通过 action 的历史来决定当前的 state

为开发工具提供全面的检查和控制能力，以便产品开发人员能够为他们的应用程序定制工具。

在重用大部分业务逻辑时提供可选的 UI。

如果你正在开发一个可扩展的终端，一个JavaScript调试器，或者一些网络应用程序，那就值得尝试一下，或者至少考虑一下它的一些想法（顺便说一下，它们不是新的！）

然而，如果你还在学习 React，不要选择 Redux 作为你的第一选择。

相反，学会在 React 中思考。如果你真的需要它，或者你想尝试一些新的东西，就回过头使用 React。但要谨慎对待，就像你用任何固执己见的工具一样。

如果你觉得有压力去做“Redux的方式”，这可能表明你或你的队友对此过于重视。它只是你工具箱中的一个工具，一个疯狂的实验。

最后，不要忘记不用Redux就可以应用Redux中的思想。例如，考虑具有组件内部 state 的React组件:

import React, { Component } from "react";

class Counter extends Component {
  state = { value: 0 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };
  
  render() {
    return (
      
        {this.state.value}
        
        
      
    )
  }
}

认真重申一遍，看样子一切都很完美。

组件内部 state 没毛病

Redux提供的折衷方案是增加间接性，将“发生的事情”与“事情如何变化”分开。

这总是一件好事吗？不，这是一个折衷方案。

例如，我们可以从我们的组件中提取一个 reducer：

import React, { Component } from "react";

const counter = (state = { value: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

class Counter extends Component {
  state = counter(undefined, {});
  
  dispatch(action) {
    this.setState(prevState => counter(prevState, action));
  }

  increment = () => {
    this.dispatch({ type: "INCREMENT" });
  };

  decrement = () => {
    this.dispatch({ type: "DECREMENT" });
  };
  
  render() {
    return (
      
        {this.state.value}
        
        
      
    )
  }
}

注意我们如何在不运行npm install的情况下使用Redux。哇！

你应该对有状态的组件做这件事吗？可能不会。也就是说，除非你有计划从这种额外的间接中受益。按照我们这个时代的说法，制定计划是

专线服务混合云你可能没有权限使用网络资源 Redux redux源码 redux-saga

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95848.html

深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

imingyu 2019-08-20 14:22 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

VPointer 2019-08-01 16:19 评论0 收藏0
谈谈React那些小事

摘要：在如今的前端框架界，三分天下的时代已经到来，而曾经一统天下的局面已一去不复返。三分天下，前端虽乱，但美其名曰繁荣。那些小事俗话说千里之堤毁于蚁穴，在开发中我们不能忙于进度而忽视了细节。前言说起React，那也是近一年多时间火起来的前端框架，其在Facebook的影响力和大力推广下，已然成为目前前端界的中流砥柱。在如今的前端框架界，React、Vue、Angular三分天下的时代已经...

Berwin 2019-08-22 10:43 评论0 收藏0
【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0
实例讲解Redux

摘要：实例讲解示例代码地址在这里你可以通过命令到本地，也可以直接下载。之后便可以通过执行示例代码。下面结合实例中的内容理解上述概念。更改应用的状态通过方法将发送到函数中，进行状态的更新。分别用来处理页面和页面状态的更新。实例讲解Redux 示例代码地址在这里 ,你可以通过git clone命令clone到本地，也可以直接下载。然后通过执行npm install 安装所依赖的模块。之后便...

roland_reed 2019-08-20 12:21 评论0 收藏0