首頁(yè) 猿問(wèn) 如何在redux中存儲(chǔ)某個(gè)狀態(tài)的多個(gè)副本

如何在redux中存儲(chǔ)某個(gè)狀態(tài)的多個(gè)副本

JavaScript

德瑪西亞99 2022-10-08 15:02:24

應(yīng)該注意的是，我將 Redux 與 React-Native 一起使用。為簡(jiǎn)單起見(jiàn)，假設(shè)我有一個(gè)電子郵件查看器。有一個(gè)包含大量電子郵件列表的主頁(yè)，當(dāng)您點(diǎn)擊電子郵件時(shí)，您會(huì)被導(dǎo)航到另一個(gè)屏幕。在這里，電子郵件的內(nèi)容、標(biāo)題、主題、正文，都保存在一個(gè)由 redux 管理的狀態(tài)中。這一切都很好。假設(shè)我退出該頁(yè)面，現(xiàn)在導(dǎo)航到另一封電子郵件。在顯示新電子郵件之前，前一封電子郵件會(huì)彈出一秒鐘。這里應(yīng)該注意的是，我將數(shù)據(jù)存儲(chǔ)在 AsyncStorage 作為一種“緩存？”。這里的問(wèn)題是，由于我只在點(diǎn)擊電子郵件時(shí)重新更新?tīng)顟B(tài)，所以作為電子郵件查看頁(yè)面正文的狀態(tài)在用戶導(dǎo)航到它后瞬間更新。這，很煩人。問(wèn)題的核心是這個(gè)如何在不覆蓋當(dāng)前活動(dòng)狀態(tài)的情況下將我的數(shù)據(jù)主體存儲(chǔ)在另一個(gè)狀態(tài)，在功能上與當(dāng)前電子郵件查看狀態(tài)相同？或者這甚至是最好的方法嗎？

查看完整描述

1 回答

長(zhǎng)風(fēng)秋雁

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊

你可以使用 Redux 的生命周期方法來(lái)處理這個(gè)問(wèn)題。假設(shè)您的電子郵件詳細(xì)信息組件的狀態(tài)如下所示：

export const initialState: StateShape = {

loading: false,

readOnlyEmailData: {

recipientEmails: null,

senderEmail: null,

body: null,

},

};

當(dāng)電子郵件詳細(xì)信息組件（我們稱之為 EmailDetail.jsx）正在加載時(shí)，您可以使用 ComponentDidMount() 來(lái)獲取和設(shè)置您的值。

您可能會(huì)擁有像 getEmail、getEmailSuccess 和 getEmailError 這樣的操作和操作創(chuàng)建器。在 getEmail 中將 loading 設(shè)置為 true，然后在成功或錯(cuò)誤時(shí)再次設(shè)置為 false。您可以將條件渲染的微調(diào)器組件（很容易從 MaterialUI 之類的東西借用）添加到 EmailDetail，該組件僅在加載為 true 時(shí)可見(jiàn)，并在加載為 false 時(shí)渲染其余內(nèi)容。

當(dāng)用戶點(diǎn)擊后退按鈕或以其他方式離開(kāi)組件時(shí)，可以為 componentWillUnmount() 提供一個(gè)在組件準(zhǔn)備卸載時(shí)要做的事情的列表。在這種情況下，您可以使用重置方法將加載和 readOnlyEmailData 重置為卸載時(shí)的初始狀態(tài)。

當(dāng)用戶單擊新電子郵件時(shí)，它將在掛載時(shí)加載新電子郵件數(shù)據(jù)并顯示微調(diào)器，直到新電子郵件數(shù)據(jù)可用。

還有其他方法可以做到這一點(diǎn)，這不是最優(yōu)化的，但它應(yīng)該比你迄今為止嘗試過(guò)的更好。我希望它有幫助:)

反對(duì) 回復(fù) 2022-10-08