你不必定須要Redux

本文翻譯自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以前深思熟慮一下:

• 方便地可以將應用狀態存儲到本地而且重啓動時可以讀取恢復狀態

• 方便地可以在服務端完成初始狀態設置，而且完成狀態的服務端渲染

• 可以序列化記錄用戶操做，可以設置狀態快照，從而方便進行Bug報告與開發者的錯誤重現

• 可以將用戶的操做或者事件傳遞給其餘環境而不須要修改現有代碼

• 可以添加劇放或者撤銷功能而不須要重構代碼

• 可以在開發過程當中實現狀態歷史的回溯，或者根據Action的歷史重現狀態

• 可以爲開發者提供全面透徹的審視和修改現有開發工具的接口，從而保證產品的開發者可以根據他們本身的應用需求打造專門的工具

• 可以在複用如今大部分業務邏輯的基礎上構造不一樣的界面

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