【譯】也許你沒必要使用 Redux

原文連接：You Might Not Need Redux

人們經常在正真須要 Redux 以前，就選擇使用它。「若是不使用 Redux，咱們的應用沒法擴展怎麼辦？」應用接入 Redux 以後，開發者就開始頭疼了。「爲何爲了開發一個簡單的功能須要建立 3 個文件？」爲何！

人們痛苦地抱怨 Redux, React, FP, 不可變數據和一些別的東西，但我理解他們。那些不須要一系列代碼來更新應用狀態的方法天然比使用 Redux 更爲簡單。這說的沒錯，設計上也是如此。

Redux 提供了一種權衡。它要求你：

• 用簡單的對象和數組來描述應用狀態

• 用簡單對象來描述應用中的變動

• 用純函數來描述處理變動的邏輯

不管是否是 React 應用，這些限制都不是建立一個應用所必須的。事實上，這些都是很是強的約束，在把它們加入應用以前，你應當慎重考慮。

你有沒有一些好的理由來使用 Redux？

固然是有的。這些限制吸引我是由於它同時也可以使應用擁有如下的特性：

• 持久化應用狀態到 LocalStorage，以後應用能夠根據該狀態啓動。（視頻預警）

• 服務器初始化應用狀態，客戶端直接根據該狀態啓動。

• 序列化用戶操做，並將它們連同應用狀態的快照一同添加到錯誤報告中，使得產品開發人員可以經過重放用戶操做來重現錯誤。

• 無須要對代碼作巨大的修改，就能經過網絡傳遞簡單的 Action 對象來實現協做環境。

• 無須要對代碼作巨大的修改，就能實現撤銷或重作。

• 在開發環境中，能夠在應用狀態歷史中旅行，而且當代碼修改時，會根據操做歷史從新計算當前狀態。

• 開發工具提供了全面的檢查和控制能力，使產品開發人員能爲他們的應用構建自定義工具。

• 當 UI 變動時，能夠重用大部分業務邏輯。（視頻預警）

若是，你正在開發一個可擴展的終端、JavaScript 調試器，或是某些類型的應用，那麼，Redux 也許值得一試。至少，它是值得考慮的。（順便說一句，Elm 和 Om 並非新技術。）

然而，若是你只是學習 React，那麼，Redux 並非你的首選。

與之相反，你該看看理解 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>
    )
  }
}

這是很是合理的。認真地說，它值得重複使用。

使用內部 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 庫它自己只是一系列的助手將 reducers 「掛載」到全局惟一的 store 對象上。你能夠根據你的喜愛來選擇是儘量少，或儘量多得使用 Redux。

可是，若是你付出了一些，確保你同時也能得到一些回報。

譯者注：若是你對本文感興趣，你或許也會對這篇文章感興趣。