javascript - 在哪里存储影响全局状态的 reducer

Question

这是我的商店形状:

export default {
    isRequesting: false,
    requestError: null,
    things: [],
    otherThings: []
}

当从服务器获取 things 和 otherThings 时，isRequesting 发生变化，requestError 可能是变了。目前，我正在像 reducers/thingReducer.js 和 reducers/otherThingReducer.js 这样的 reducers 中改变这些，例如:

// reducers/thingReducer.js
import { combineReducers } from 'redux'
import { LOAD_THINGS_REQUESTING, LOAD_THINGS_SUCCESS, LOAD_THINGS_ERROR } from '../actions/actionTypes'
import initialState from './initialState'


export function things(state = initialState.things, action) {
    switch(action.type) {
        case LOAD_THINGS_SUCCESS: 
            return action.things
        default:
            return state
    }
}

export function isRequesting(state = initialState.isRequesting, action) {
    switch(action.type) {
        case LOAD_THINGS_REQUESTING:
            return true
        case LOAD_THINGS_SUCCESS:
            return false
        case LOAD_THINGS_ERROR:
            return false
        default:
            return state
    }
}

export function requestError(state = initialState.requestError, action) {
    switch(action.type) {
        case LOAD_THINGS_ERROR:
            return action.error
        default:
            return state
    }
}

const thingsReducer =  {
    things,
    isRequesting,
    requestError
}

export default thingsReducer

如您所见，我的 thingReducer 中有用于 isRequesting 和 requestError 的 reducer，我在 otherThingReducer< 中也有同样的东西 还有。

您可能还会看到我正在导出每个函数，以便我可以在 rootReducer.js

中执行以下操作

const rootReducer = combineReducers({
    ...thingReducer,
    ...otherThingReducer
})

export default rootReducer

我从未在示例代码(展开 reducer)中看到过这样做，这让我觉得每个 reducer 文件应该只包含一个函数。我明白这是两个问题:

1. isRequesting 和 requestError 是否应该存在于单独的 reducer 文件中(即使它们是全局状态的一部分)

2. 如果是这样，它们是否应该像我上面所做的那样传播和组合。即使 1) 的答案是否定的，当每个 reducer 文件实际上需要多个 reducer 时，我可以使用这种 spread/combine 方法吗？

Answer 1

您没有展开 reducer 。 thingsReducer 是一个包含缩减器的对象，您正在展开该对象。如果你使用 combineReducers，你可以让 thingsReducer 成为一个嵌套的 reducer，但我认为没有必要这样做:

const thingsReducer = combineReducers({
    things,
    isRequesting,
    requestError
})

至于您的问题，isRequesting 和requestError 位于何处并不重要。将每个 reducer 放在自己的模块中是一种常见的做法(例如检查 Ducks https://github.com/erikras/ducks-modular-redux )，但这取决于您。您还可以完全删除 thingsReducer 并将 reducer 直接导入到您的 rootReducer.js 中，如下所示:

import {things, isRequesting, requestError} from './reducers/thingReducer'
// Or if you decided to put each reducer in its own file
// import things from './reducers/thingsReducer' 
// import isRequesting from './reducers/isRequestingReducer' 
// ...

const rootReducer = combineReducers({
    things,
    isRequesting,
    requestError,
    // do the same for otherThingReducer reducers
})

export default rootReducer

更新:要在评论中回答您的问题，您可以执行以下操作来简化您的代码。由于您要重用许多操作，因此可以将您的 reducer 合并为一个，如下所示:

export function things(state = initialState, action) {
    switch(action.type) {
        case LOAD_THINGS_SUCCESS: 
            return {
                ...state,
                things: action.things,
                isRequesting: false
            }
        case LOAD_THINGS_ERROR: 
            return {
                ...state,
                requestError: action.error,
                isRequesting: false
            }
        case LOAD_THINGS_REQUESTING: 
            return {
                ...state,
                isRequesting: true
            }

        default:
            return state
    }
}

如果这样做，您只需要将默认的 things reducer 导入 rootReducer 即可。