在不破壞redux-logger的情況下避免reducer名稱沖突

Question

根據官方Redux 文檔 ，出於各種原因，建議每個應用程序僅創建一個商店。

在這種情況下，如何避免與reducers發生名稱沖突？ 例如，考慮一個具有兩個屏幕的本地本機應用程序：

1. 收件箱
2. 新聞

您可以在每個屏幕上分別刷新數據，這在承諾的獲取期間應該顯示其各自的RefreshControl組件。

考慮以下樣板代碼，

// createReducer.js
export default function createReducer(initialState, handlers) {
    return function reducer(state = initialState, action) {
        if (handlers.hasOwnProperty(action.type)) {
            return handlers[action.type](state, action)
        } else {
            return state
        }
    }
}

我可以通過傳統方式解決刷新問題，但會增加名稱空間污染。

export const refreshingInbox = createReducer(false, {
    [types.REQUEST_INBOX](state, action) {
        return true
    },
    [types.UPDATE_INBOX](state, action) {
        return false
    },
})
export const refreshingNews = createReducer(false
    [types.REQUEST_NEWS](state, action) {
        return true
    },
    [types.UPDATE_NEWS](state, action) {
        return false
    },
})

我想通過執行以下操作來避免這種情況：

export const refreshing = createReducer({inbox: false, news: false}, {
    [types.REQUEST_INBOX](state, action) {
        return Object.assign(state, {inbox: true})
    },
    [types.UPDATE_INBOX](state, action) {
        return Object.assign(state, {inbox: false})
    },
    [types.REQUEST_NEWS](state, action) {
        return Object.assign(state, {news: true})
    },
    [types.UPDATE_NEWS](state, action) {
        return Object.assign(state, {news: false})
    },
})

兩種解決方案都可以完成工作，但是我的解決方案破壞了記錄器。 記錄器無法檢測到任何差異。 我認為他與我要返回不可變對象有關。

那我該怎么辦，那不會增加名稱空間的污染（我什至無法想象在一個大型項目中進行團隊生產會帶來多嚴重的后果），但仍然不會破壞記錄器，這對開發非常有幫助。

Answer 1

有關更改檢測的問題是因為您確實在返回一個不可變的對象。 Redux（實際上是React體系結構的一部分）將指向內存地址，如果更改指向的內存，它將檢測到更改，但是如果更改其中的內容，則不會。 這就是為什么您應該返回{...state, news: false}或Object.assign({}, state, {news: false}) 。 第一個{}是將使React看到更改的新對象。 回到您的原始問題，我個人建議為每個功能定義一個化簡器（您可以使用該功能名稱為動作類型添加前綴/后綴，以確保名稱沖突），並將它們與CombineReducers結合使用。 這取決於應用程序，但是我可以想象它很容易擁有超過10種具有不同狀態的不同功能，最終具有比單行分配更多的邏輯，因此在某個時候，您將擁有成百上千種方法行長。