你可能并不需要 Redux

 阅读约 7 分钟

你可能不需要 Redux

人们经常在他们不需要 Redux 的时候选择它。“如果我们的应用没有使用 Redux 怎么扩展?”,紧接着,开发人员对间接的Redux引入他们的代码感到不满。“为什么我必须引用三个文件才能得到一个简单的功能?” 为什么呢!

我能够理解人们责怪 Redux, React, 函数式编程,不变性和其他许多事情使他们陷入困境。将 Redux 与不需要“指定格式”代码去更新 state 的方法比较是太正常不过,可以得出结论 Redux 是复杂的。在某种程度上来说是的,但是设计如此。

Redux 提供了一个权衡,他要求你:

  • 将应用程序状态描述为普通对象和数组
  • 将系统中的变化描述为普通对象。
  • 将处理更改的逻辑描述为纯函数。

使用 React 或者不适用,这些都不是构建一个应用必要的限制。事实上这些都是很强的限制,在你的应用上使用它之前,你应该仔细考虑清楚。

你有这么做的充分理由吗?

这些限制对我很有吸引力,因为它们可以帮助构建应用程序:

如果你正在开发一个可扩展的终端,一个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。

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

阅读 745更新于 2018-07-06
推荐阅读

2484 人关注
172 篇文章
专栏主页
目录