苦苦掙扎著繞過Redux?別擔心,你並不孤單。

我從許多人那裡聽說,Redux是編寫他們想要的React應用程序的最大障礙。

到本文結束時,您將了解Redux的用途,以及如何知道何時將其添加到您自己的應用程序中。

為什麼?

最好的問題是,我們為什麼要使用Redux?

答案並非“因為互聯網上的其他人都在使用它。”(我不懷疑這就是為什麼很多人都在使用它,但讓我們更深入。)

Redux有用的原因是它解決了一個問題。

不,它解決的問題不是“國家管理”。這是非常模糊的。哎呀,React已經做了國家管理。Redux確實幫助管理狀態,但這不是它解決的問題。

這是關於數據流

如果你使用React超過幾分鐘,你可能知道道具和單向數據流。數據傳遞下來通過道具組件樹。給定這樣的組件:

的count,存儲在App的狀態,將被傳遞下來的道具:

對於數據回來了樹,它需要通過一個回調函數來流動,使回調函數必須傳遞下來到想要傳遞數據的任何組件。

您可以將數據視為電力,通過彩色電線連接到關注它的組件。數據通過這些電線向下和向上流動,但電線不能通過稀薄空氣運行 - 它們必須連接在樹中的每個組件之間。

希望這是所有的評論。(如果沒有,你應該停在這裡,去學習React,構建幾個小應用程序,並在幾天后回來。說真的.Redux在理解React如何工作之前是沒有意義的。)。

數據流的圖層和圖層

遲早你會遇到頂級容器有一些數據的情況,而4級別的孩子需要這些數據。這是Twitter的截圖,所有頭像都突出顯示:

假設用戶的頭像存儲為其個人資料數據的一部分,頂級App組件保存用戶。為了將user數據傳遞給所有3個Avatar組件,user需要通過一堆不需要數據的中間組件來編織。

獲取數據就像在採礦探險中穿針一樣。等等沒有任何意義。無論如何,這是一個痛苦的屁股。

更重要的是,它不是很好的軟件設計。鏈中的中間組件必須接受並傳遞他們不關心的道具。這意味著重構和重用該鏈中的組件將比它需要的更難。

如果不需要數據的組件根本不需要查看它,那不是很好嗎?

將任何數據插入任何組件 這是Redux解決的問題。它使組件可以直接訪問所需的數據。

使用connectRedux附帶的功能,您可以將任何組件插入Redux的數據存儲,組件可以提取所需的數據。

這是Redux的存在理由。

是的,它也做了一些其他很酷的事情,比如簡化調試(Redux DevTools讓你檢查每一個狀態變化),時間旅行調試(你可以回滾狀態變化,看看你的應用程序在過去看起來如何),以及從長遠來看,它可以使您的代碼更易於維護。它還會教你更多關於函數式編程的知識。

但這裡的事情是“將任何數據插入任何組件”,這是主要事件。如果您不需要,您可能不需要Redux。

該Avatar組件 要將所有這些與代碼聯繫起來,以下Avatar是上面組件的示例:

import React from 'react';
import { connect } from 'react-redux';

const Avatar = ({ user }) => (
  <img src={user.avatar}/>
);

const mapStateToProps = state => ({
  user: state.user
});

export { Avatar };
export default connect(mapStateToProps)(Avatar);

組件本身不知道Redux - 它只接受一個user道具並呈現頭像圖像。該mapStateToProps函數user從Redux的存儲中提取並將其映射到userprop。最後,該connect功能是實際通過飼料從終極版中的數據mapStateToProps和成Avatar。

你會注意到最後有兩個export- 一個是命名的,一個是默認的。這不是絕對必要的,但訪問原始組件及其 Redux包裝版本可能很有用。

原始組件在編寫單元測試時很有用,並且還可以提高可重用性。例如,應用程序的一部分可能要渲染Avatar的另一個比已登錄的用戶以外的用戶。在這種情況下,您甚至可以更進一步導出Redux連接版本,CurrentUserAvatar以使代碼更清晰。

何時添加Redux

如果你有一個像上面那樣的組件結構 - 其中props通過多層轉發 - 請考慮使用Redux。

如果需要在視圖之間緩存數據 - 例如,在用戶單擊詳細信息頁面時加載數據,並記住數據以便下次訪問速度很快 - 請考慮將數據存儲在Redux中。

如果你的應用程序很大,維護大量數據,相關而不是 - 考慮使用Redux。但是也可以考慮在沒有它的情況下啟動,並在遇到有用的情況時添加它。

文章翻譯來源:What Does Redux Do? (and when should you use it?)

您也可能喜歡這些文章

Copyright © 2018 ucamc