你不一定需要Redux

本文翻译自Dan Abramov(Created Redux, React Hot Loader, React DnD)的You-Might-Not-Need-Redux一文。
本文从属于笔者的前端入门与最佳实践中的Redux 入门与最佳实践系列文章。可能因为笔者能力所限本文翻译之后感觉略水，不过笔者之前在自己的实践中也一直感觉到，过早的应用各种最佳实践反而是很大的负担，特别是像笔者这样面临着不断变化的产品需求，很可能千辛万苦搭建好了基础架构，需求就变了。因此在项目行进的不同阶段应该选用不同层级的脚手架，从React到Redux以及各种最佳实践，应该渐进增强，而不是狼狈降级。

Redux已经成为了前端状态管理的首选阵容之一，有点政治正确的说，很多人在他们真的需要用到Redux之前就毫不犹豫的加入了Redux，从架构师的角度会觉得不用Redux以后怎么才能保证程序的可扩展性呢？而从底层码农的角度来看，他们会觉得喵了个咪的我为了实现一个简单的功能却要添加三个文件，好麻烦。作为React+Redux的核心开发人员之一，我能理解很多人经常抱怨Redux、React、Functional Programming、Immutability这些概念实在是学习的有些陡峭。与像Mobx这样同样优秀的状态管理框架，它们并不需要你去写大量的模板代码然后来更新状态。如果你打算使用Redux，你在享受其带来的好处的同时也要遵守以下准则:

• 必须使用基本对象与数组来描述应用状态

• 必须使用基本的对象来描述系统变化

• 必须使用纯函数来处理系统中的业务逻辑

实际上，在没有Redux的年代里，我们在构建WebAPP的时候并不需要这些准则的束缚，同样的，用不用React都可以。因此，我还是建议在你打算引入React或者Redux之前深思熟虑一下:

• 方便地能够将应用状态存储到本地并且重启动时能够读取恢复状态

• 方便地能够在服务端完成初始状态设置，并且完成状态的服务端渲染

• 能够序列化记录用户操作，能够设置状态快照，从而方便进行Bug报告与开发者的错误重现

• 能够将用户的操作或者事件传递给其他环境而不需要修改现有代码

• 能够添加重放或者撤销功能而不需要重构代码

• 能够在开发过程中实现状态历史的回溯，或者根据Action的历史重现状态

• 能够为开发者提供全面透彻的审视和修改现有开发工具的接口，从而保证产品的开发者能够根据他们自己的应用需求打造专门的工具

• 能够在复用现在大部分业务逻辑的基础上构造不同的界面

如果你正在构建一个可扩展的命令行工具、JavaScript调试工具或者类似于这样的WebAPPs，那么我是很推荐你考虑将Redux引入到项目生命周期中的，或者说很推荐你去尝试下Redux中的一些思想。不过如果你是才开始学习React，那么你也毋庸着急地去踏入Redux的世界。就好像Think in React中所述，如果你已经有了坚实的理由来使用Redux或者你本来就是打算尝试下新东西，那么你应该尝试下Redux。另一方面，如果你本身在接触Redux的时候感觉压力满满，或者说你的同事们并不是那么喜欢Redux，那么还是要再慎重考虑下。

最后，我必须要强调的是，Redux真正的灵魂在于其设计思想，你很多时候并不一定需要去用Redux库本身，你可以尝试着去应用它的思想:

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>
    )
  }

注意，Local State is Fine，不要不分青红皂白地就否定掉Local State，如果我们对上面的代码做进一步改造的话:

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>
    )
  }
}

Redux Library本身只是为了方便将Reducer挂载到单一的全局状态库中，你也可以用自己的方式来构建属于你的Redux。