你可能並不須要 Redux

時間 2019-11-09

標籤可能並不須要 redux 简体版

原文原文鏈接

你可能不須要 Redux

人們常常在他們不須要 Redux 的時候選擇它。「若是咱們的應用沒有使用 Redux 怎麼擴展？」，緊接着，開發人員對間接的Redux引入他們的代碼感到不滿。「爲何我必須引用三個文件才能獲得一個簡單的功能？」爲何呢！javascript

我可以理解人們責怪 Redux, React, 函數式編程，不變性和其餘許多事情使他們陷入困境。將 Redux 與不須要「指定格式」代碼去更新 state 的方法比較是太正常不過，能夠得出結論 Redux 是複雜的。在某種程度上來講是的，可是設計如此。html

Redux 提供了一個權衡，他要求你：java

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

使用 React 或者不適用，這些都不是構建一個應用必要的限制。事實上這些都是很強的限制，在你的應用上使用它以前，你應該仔細考慮清楚。react

你有這麼作的充分理由嗎？git

這些限制對我頗有吸引力，由於它們能夠幫助構建應用程序：github

若是你正在開發一個可擴展的終端，一個JavaScript調試器，或者一些網絡應用程序，那就值得嘗試一下，或者至少考慮一下它的一些想法（順便說一下，它們不是新的！）npm

然而，若是你還在學習 React，不要選擇 Redux 做爲你的第一選擇。編程

相反，學會在 React 中思考。若是你真的須要它，或者你想嘗試一些新的東西，就回過頭使用 React。但要謹慎對待，就像你用任何執拗己見的工具同樣。redux

若是你以爲有壓力去作「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。

可是若是你付出了一些東西，請確保獲得收穫。