[譯]你可能不需要Redux

廣州蘆葦科技web前端發表於2019-04-16
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。

但如果你捨棄一些東西，請確保得到相應的回報。

[完]  撒花複製程式碼

相關文章