你可能并不需要 Redux

你可能不需要 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。 哇！

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

Redux库本身只是一组帮助器，用于将reducer挂载到单个全局存储对象。只要你喜欢，你可以使用尽可能少的Redux。

但是如果你付出了一些东西，请确保得到收获。