在不破坏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种具有不同状态的不同功能，最终具有比单行分配更多的逻辑，因此在某个时候，您将拥有成百上千种方法行长。