[译]你可能不须要Redux

原文连接You Might Not Need Redux

人们常常在须要前选择Redux。若是没有它咱们的应用程序不能扩展怎么办。后来， 开发人员对REdux介绍他们的代码的方向很困惑。为何我必须使用三个文件才能使一个简单的功能工做？为何呢？

人们将Redux，React，函数式编程，不变性以及许多其余东西归咎于他们的困境，我理解他们。 很天然地将Redux与不须要“样板”代码来更新状态的方法进行比较，并得出结论Redux只是复杂的。在某种程度上，它是设计的

Redux 提供权衡。它要求你：

• 将应用程序状态描述为普通对象和数组
• 将系统中的更改描述为普通对象
• 描述将更改做为纯函数处理的逻辑

不管有没有React，构建应用程序都不须要这些限制。事实上，这些都是很是强大的限制因素，即便在应用程序的某些部分中，在使用前你也应该仔细考虑它们。

这样作你有充分的理由吗？

这些限制对我颇有吸引力，由于它们有助于构建如下应用：

• 将状态保持到本地存储，从中启动，开箱即用。
• 在服务器上预填充状态，以HTML格式将其发送到客户端，并从中启动，开箱即用。
• 序列化用户操做并将其与状态快照一块儿附加到自动错误报告中，以便产品开发人员能够重播它们以重现错误。
• 经过网络传递操做对象以实现协做环境，而不会对代码的编写方式进行重大更改。
• 维护撤消历史记录或实施乐观突变，而不会对代码的编写方式进行重大更改。
• 在开发状态历史之间旅行，并在代码改变时从动做历史中从新评估当前状态，即TDD。
• 为开发工具提供全面的检查和控制功能，以便产品开发人员能够为他们的应用程序构建自定义工具。

若是你正在使用可扩展终端，JavaScript调试器或某些类型的Web应用程序，那么可能值得尝试一下，或者至少考虑一些它的想法（顺便说一下，它们并非 新的！）

可是，若是您只是学习React，请不要将Redux做为您的首选。

而是学会在React中思考。若是您真的须要它，或者若是您想尝试新的东西，请回到Redux。但要谨慎对待它，就像使用任何高度自觉得是的工具同样

最后，不要忘记你能够在不使用Redux的状况下应用Redux中的想法。例如，考虑具备本地状态的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, 哇！

你应该对你的有状态组件这样作吗？可能不是。也就是说，除非你计划从Redux使用中获益。按照咱们这个时代的说法，制定计划是关键

Redux库自己只是一组帮助器，可将“mount”reducer“挂载”到单个全局存储对象。您能够根据须要使用尽量少的Redux。

但若是你舍弃一些东西，请确保获得相应的回报。

[完]  撒花复制代码