首页 > 云开发 > JavaScript > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

你可能并不需要 Redux

JavaScript

你可能不需要 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 (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

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

组件内部 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 (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

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

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

文章来源:segmentfault,作者:csywweb。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

Redux React.js

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索