可重複使用的react-redux容器組件

在我的React/Redux應用程序中，我經常面臨的問題是實現應該在整個應用程序中使用的狀態組件。讓我們以一個簡單的彈出組件作爲一個開放/關閉狀態的例子，它可以在任何頁面中重用。這裏是我發現了兩個可能的方法：可重複使用的react-redux容器組件

使用setState和「本地」減速機（我用recompose.withReducer這只是語法糖陣營的本地setState）來管理其狀態。它看起來很容易且可重用，直到您需要在頁面的其他部分更改組件的狀態（在大小寫的情況下關閉彈出窗口）。你不能只是調用一些redux動作來改變狀態。
將組件的狀態保存在Redux存儲中。使用這種方法，我們可以在組件樹的任何位置調用closePopupAction({ id })來更改它的狀態。「但是，我們需要以某種方式在組件裝入時將其reducer（我想保留在彈出文件夾中）放到根reducer上並刪除它當組件被卸載時。另外，我們可以在頁面中顯示多個彈出窗口，並且每個窗口都有自己的狀態。

有沒有人遇到類似的問題？

來源

2016-10-01 Eugene Gluhotorenko

我不確定你在問什麼。你問問哪種解決方案比另一種更好？ – wuct

兩種方式都不起作用。所以我正在尋找其他的東西 –

你能詳細說說你想達到什麼嗎？我相信這兩種方式都是有效的。在'recompose'情況下，如果你想在其他子樹中調用'setState'，你可以用'（）'提升到更高的節點。在'redux'情況下，除非狀態非常大，否則不需要刪除reducer。 – wuct

我認爲你應該保持組件的狀態。您可以通過這種方式創建此組件和使用combineReducers功能減速器：

rootReducer = combineReducers({ 
    moduleA: combineReducers({ 
     popupA: popupReducer("id1"), 
     popupB: popupReducer("id2") 
    }), 
    moduleB: combineReducers({ 
     popupA: popupReducer("id3") 
    }) 
    }) 
});

那麼當你調用closePopupAction（「ID1」）減速機可查身份證和改變狀態的正常組成部分。

PS：身份證應更好的方式來提供:)

來源

2016-10-14 17:17:54

Redux需要指定狀態的確切結構。但是如果我有彈出列表呢？他們每個人都有自己的國家 –

你必須只設置初始狀態。有兩個選項： 1. const initialState = {popups：[]} 你可以在[todomvc示例] ） 2。const initialState = {popupsById：{}} and after action AddPopup（id，someState） in reducer state.popupsById [id] = someState objectAssign（{}，state）; –

此答案是針對不同問題的解決方案。 –

你可以每個組件的狀態安裝到自己的商店的切片。

所以你closePopupAction行動將與安裝路徑被稱爲：

closePopupAction({ mountPath: 'popups.popup1' })

，你就只需要一個減速來處理所有closePopupAction行動，這可能會在啓動時註冊一次：

(state, { type, mountPath }) => { 
     if (type === 'CLOSE_POPUP_ACTION') { 
     // manipulate with the slice at `mountPath`, e.g. 
     return _.set(_.cloneDeep(state), `${mountPath}.isOpen`, false) 
     } 
     // ... 
    }

來源

2017-08-22 11:57:01

可重複使用的react-redux容器組件

回答

相關問題