如何處理REDX中的彈出狀態？

假設我有一個'用戶信息'彈出窗口，'供稿'彈出窗口，'菜單'彈出窗口組件和一些更多的彈出窗口在我的頁面上。如果我打開任何彈出窗口，則關閉其餘的彈出窗口。如果我點擊外面，所有人都關閉。如何處理REDX中的彈出狀態？

如何處理redux或redux-react-local中的彈出狀態？

如果我添加更多document.addEventListener("click", function)，它會影響性能嗎？

事件委託如何爲全局（文檔）click，keyPress，...事件工作？

來源

2016-03-15 Vimalesan

我會將事件處理程序添加到每個彈出窗口，並讓您的reducer負責相應地更改狀態。每個彈出窗口都會有一個ID。當點擊一個特定的時候，減速器將設置它的狀態打開，其餘的關閉。

單擊外部可能是失去焦點的事件處理程序。我不認爲你需要任何全球事件。

例初始狀態：

const initialState = { 
    popup1: false, // closed 
    popup2: false, // closed 
    ... 
}

例減速機：

const { popId } = action; 
case 'POPUP_CLICKED': 
    const newState = { ...initialState }; 
    newState[popId] = true; // opened 
    return { newState }; 

case 'POPUP_LOST_FOCUS': 
    return { ...initialState };

當然，如果你有其他狀態屬性，不復位狀態，從而毫不客氣地和遍歷，也許設置名爲popups的屬性將成爲所有彈出窗口的狀態並重置它們。無論哪種方式，這些行動應該足以處理所有邊緣情況。

來源

2016-03-15 20:47:09 ZekeDroid

謝謝，我不明白沒有全局事件如何關閉popup_lost_focus http://jsbin.com/cipowiyoti/1/edit?css,js,console,output – Vimalesan

如何處理REDX中的彈出狀態？

回答

相關問題