myvin

你可能不需要Redux

myvin · 2016-12-04翻译 · 1344阅读 原文链接

在决定是否需要 Redux 之前,人们总会选择 Redux 。“如果不使用 Redux 的话我们的应用不能扩展怎么办?”之后,开发者就会因为引入 Redux 而发愁。“只是让一个简单的 feature 运行,为什么我要搞出三个文件呢?” Redux 一定是必须的吗!

人们将他们的痛苦责任归咎于 Redux、React、函数式编程、不可变性和许多其他的东西,对此我表示理解。拿 Redux 和其他不需要引入“样板文件”代码来更新状态的方式对比是很自然的,所以自然而然会得出 Redux 相对复杂的结论。某种程度上来说 Redux 的确是这样的,从设计上来说也是这样的。

Redux提供了一个 tradeoff 。它要求你这样做:

  • 使用纯对象和数组来描述应用状态。
  • 在系统中使用纯对象来描述变化。
  • 使用纯函数来描述处理变化的逻辑。

无论是否使用 React,这些限制中没有哪些是构建应用所必须的。实际上这会带来很大的约束,在你把它应用到你的应用中前请三思而后行。

你有必须要这样做的好理由吗?

这些限制吸引我的原因是因为它们有助于我们构建这样的应用:

如果你正在处理一个可扩展的终端一个 JavaScript debug 工具,或者一些 webapp,有价值去尝试一下,或者可以至少思考一下它的设计初衷,(顺带说一句,这些东西并不是 第一次被提出来的)。

但是,如果你正在学习 React,不要把 Redux 作为你的首要选择。

你应该去学习下 think in React。如果你确实发现你需要使用Redux,或者你想要尝试一些新东西,那时再重拾Redux也不迟。但是,就像使用其他工具一样要小心谨慎。

如果你按照“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>
    )
  }
}

真的非常棒,能够重复使用。

本地状态也真的很好.

Redux 提供的权衡可以添加间接引用,减弱“发生了什么”和“如何发生”之间的耦合。

但是,无论什么时候这样做都是好的吗?不是的,这只是一种权衡。

举个栗子,我们可以从我们的组件中抽象出 reducer ,自己动手实现一个 Redux:

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,而没有通过npm来安装。哇哦,太棒了。

你是否应该把它应用到你的状态化组件中呢?也许并不需要。是这样的:除非你有计划打算从额外的间接引用中获益,否则不要这样做。在我们这个时代,未雨绸缪是成功的关键,不是吗?

Redux 库只是一个将 reducer 绑定到全局存储对象的工具而已。只要你喜欢,你可以使用Redux的一部分特性,也可以使用 Redux 的全部特性。

但是请记住,在下手之后,确保你能得到相应的回报。

译者myvin尚未开通打赏功能

相关文章