Question

根据官方Redux docs，建议每个应用只创建一个商店，原因有多种。

在这种情况下，我应该如何避免与减速器名称冲突？例如，考虑一个具有两个屏幕的react-native应用程序：

收件箱
新闻

您可以在每个屏幕上单独刷新数据，这应该在承诺的提取存在期间，显示它各自的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种具有不同状态的不同功能，最终具有比单行分配更多的逻辑，因此在某个时候，您将拥有成百上千种方法行长。

避免缩减器名称冲突而不破坏redux-logger

1 个答案: