你可能并不需要 Redux

AZmake 發(fā)布于2019-08-22 18:25 / 994人閱讀

摘要：你可能不需要人們經(jīng)常在他們不需要的時(shí)候選擇它。將與不需要指定格式代碼去更新的方法比較是太正常不過(guò)，可以得出結(jié)論是復(fù)雜的。保持歷史可撤銷(xiāo)或?qū)崿F(xiàn)可預(yù)見(jiàn)的變化，而不會(huì)對(duì)編寫(xiě)代碼的方式發(fā)生重大變化。哇你應(yīng)該對(duì)有狀態(tài)的組件做這件事嗎可能不會(huì)。

你可能不需要 Redux

人們經(jīng)常在他們不需要 Redux 的時(shí)候選擇它。“如果我們的應(yīng)用沒(méi)有使用 Redux 怎么擴(kuò)展？”，緊接著，開(kāi)發(fā)人員對(duì)間接的Redux引入他們的代碼感到不滿(mǎn)。“為什么我必須引用三個(gè)文件才能得到一個(gè)簡(jiǎn)單的功能？” 為什么呢！

我能夠理解人們責(zé)怪 Redux, React, 函數(shù)式編程，不變性和其他許多事情使他們陷入困境。將 Redux 與不需要“指定格式”代碼去更新 state 的方法比較是太正常不過(guò)，可以得出結(jié)論 Redux 是復(fù)雜的。在某種程度上來(lái)說(shuō)是的，但是設(shè)計(jì)如此。

Redux 提供了一個(gè)權(quán)衡，他要求你：

將應(yīng)用程序狀態(tài)描述為普通對(duì)象和數(shù)組

將系統(tǒng)中的變化描述為普通對(duì)象。

將處理更改的邏輯描述為純函數(shù)。

使用 React 或者不適用，這些都不是構(gòu)建一個(gè)應(yīng)用必要的限制。事實(shí)上這些都是很強(qiáng)的限制，在你的應(yīng)用上使用它之前，你應(yīng)該仔細(xì)考慮清楚。

你有這么做的充分理由嗎？

這些限制對(duì)我很有吸引力，因?yàn)樗鼈兛梢詭椭鷺?gòu)建應(yīng)用程序：

將 state 在本地存儲(chǔ)，項(xiàng)目啟動(dòng)開(kāi)箱即用。

在服務(wù)渲染提前寫(xiě)入 state 以 HTML 格式發(fā)送到客戶(hù)端，在客戶(hù)端啟動(dòng)，開(kāi)箱即用

序列化用戶(hù)操作，并將它們與狀態(tài)快照一起附加到自動(dòng)化的bug報(bào)告中，以便產(chǎn)品開(kāi)發(fā)人員可以重放它們以重現(xiàn)錯(cuò)誤。

通過(guò)傳遞 action 對(duì)象以實(shí)現(xiàn)寫(xiě)作環(huán)境，而不會(huì)對(duì)編寫(xiě)代碼的方式發(fā)生重大變化。

保持歷史可撤銷(xiāo)或?qū)崿F(xiàn)可預(yù)見(jiàn)的變化，而不會(huì)對(duì)編寫(xiě)代碼的方式發(fā)生重大變化。

在開(kāi)發(fā)過(guò)程中往來(lái)于 state 歷史之間，并在代碼更新時(shí)通過(guò) action 的歷史來(lái)決定當(dāng)前的 state

為開(kāi)發(fā)工具提供全面的檢查和控制能力，以便產(chǎn)品開(kāi)發(fā)人員能夠?yàn)樗麄兊膽?yīng)用程序定制工具。

在重用大部分業(yè)務(wù)邏輯時(shí)提供可選的 UI。

如果你正在開(kāi)發(fā)一個(gè)可擴(kuò)展的終端，一個(gè)JavaScript調(diào)試器，或者一些網(wǎng)絡(luò)應(yīng)用程序，那就值得嘗試一下，或者至少考慮一下它的一些想法（順便說(shuō)一下，它們不是新的！）

然而，如果你還在學(xué)習(xí) React，不要選擇 Redux 作為你的第一選擇。

相反，學(xué)會(huì)在 React 中思考。如果你真的需要它，或者你想嘗試一些新的東西，就回過(guò)頭使用 React。但要謹(jǐn)慎對(duì)待，就像你用任何固執(zhí)己見(jiàn)的工具一樣。

如果你覺(jué)得有壓力去做“Redux的方式”，這可能表明你或你的隊(duì)友對(duì)此過(guò)于重視。它只是你工具箱中的一個(gè)工具，一個(gè)瘋狂的實(shí)驗(yàn)。

最后，不要忘記不用Redux就可以應(yīng)用Redux中的思想。例如，考慮具有組件內(nèi)部 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 (
      
        {this.state.value}
        
        
      
    )
  }
}

認(rèn)真重申一遍，看樣子一切都很完美。

組件內(nèi)部 state 沒(méi)毛病

Redux提供的折衷方案是增加間接性，將“發(fā)生的事情”與“事情如何變化”分開(kāi)。

這總是一件好事嗎？不，這是一個(gè)折衷方案。

例如，我們可以從我們的組件中提取一個(gè) 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 (
      
        {this.state.value}
        
        
      
    )
  }
}

注意我們?nèi)绾卧诓贿\(yùn)行npm install的情況下使用Redux。哇！

你應(yīng)該對(duì)有狀態(tài)的組件做這件事嗎？可能不會(huì)。也就是說(shuō)，除非你有計(jì)劃從這種額外的間接中受益。按照我們這個(gè)時(shí)代的說(shuō)法，制定計(jì)劃是