[譯]你可能不須要Redux

原文連接You Might Not Need Redux

人們常常在須要前選擇Redux。若是沒有它咱們的應用程序不能擴展怎麼辦。後來， 開發人員對REdux介紹他們的代碼的方向很困惑。爲何我必須使用三個文件才能使一個簡單的功能工做？爲何呢？

人們將Redux，React，函數式編程，不變性以及許多其餘東西歸咎於他們的困境，我理解他們。 很天然地將Redux與不須要「樣板」代碼來更新狀態的方法進行比較，並得出結論Redux只是複雜的。在某種程度上，它是設計的

Redux 提供權衡。它要求你：

• 將應用程序狀態描述爲普通對象和數組
• 將系統中的更改描述爲普通對象
• 描述將更改做爲純函數處理的邏輯

不管有沒有React，構建應用程序都不須要這些限制。事實上，這些都是很是強大的限制因素，即便在應用程序的某些部分中，在使用前你也應該仔細考慮它們。

這樣作你有充分的理由嗎？

這些限制對我頗有吸引力，由於它們有助於構建如下應用：

• 將狀態保持到本地存儲，從中啓動，開箱即用。
• 在服務器上預填充狀態，以HTML格式將其發送到客戶端，並從中啓動，開箱即用。
• 序列化用戶操做並將其與狀態快照一塊兒附加到自動錯誤報告中，以便產品開發人員能夠重播它們以重現錯誤。
• 經過網絡傳遞操做對象以實現協做環境，而不會對代碼的編寫方式進行重大更改。
• 維護撤消歷史記錄或實施樂觀突變，而不會對代碼的編寫方式進行重大更改。
• 在開發狀態歷史之間旅行，並在代碼改變時從動做歷史中從新評估當前狀態，即TDD。
• 爲開發工具提供全面的檢查和控制功能，以便產品開發人員能夠爲他們的應用程序構建自定義工具。

若是你正在使用可擴展終端，JavaScript調試器或某些類型的Web應用程序，那麼可能值得嘗試一下，或者至少考慮一些它的想法（順便說一下，它們並非 新的！）

可是，若是您只是學習React，請不要將Redux做爲您的首選。

而是學會在React中思考。若是您真的須要它，或者若是您想嘗試新的東西，請回到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使用中獲益。按照咱們這個時代的說法，制定計劃是關鍵

Redux庫自己只是一組幫助器，可將「mount」reducer「掛載」到單個全局存儲對象。您能夠根據須要使用盡量少的Redux。

但若是你捨棄一些東西，請確保獲得相應的回報。

[完]  撒花複製代碼