你不必定须要Redux

时间 2019-11-05

标签必定须要 redux 繁體版

原文原文链接

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

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

必须使用基本对象与数组来描述应用状态前端
必须使用基本的对象来描述系统变化java
必须使用纯函数来处理系统中的业务逻辑react

实际上，在没有Redux的年代里，咱们在构建WebAPP的时候并不须要这些准则的束缚，一样的，用不用React均可以。所以，我仍是建议在你打算引入React或者Redux以前深思熟虑一下:git

若是你正在构建一个可扩展的命令行工具、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。