你不一定需要Redux

4

本文翻译自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之前深思熟虑一下:

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

agzgz · 2016年09月21日

redux用烂了,更可怕

回复

载入中...