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

Question

这是我的店铺形状：

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

当从服务器获取 things 和 otherThings 时，isRequesting 会更改，requestError 可能会更改。目前，我正在像 reducers/thingReducer.js 和 reducers/otherThingReducer.js 这样的减速器中更改这些，例如：

// 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 的减速器，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

你没有分散减速器。 thingsReducer 是一个包含减速器的对象，您正在分散该对象。如果您使用 combineReducers，您可以将 thingsReducer 设为嵌套减速器，但我认为没有必要：

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

至于您的问题，isRequesting 和 requestError 的位置并不重要。将每个减速器放在自己的模块中是一种常见的做法（检查 Ducks，例如 https://github.com/erikras/ducks-modular-redux），但这取决于您。您也可以完全删除 thingsReducer 并将减速器直接导入您的 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

更新： 要在 cmets 中回答您的问题，您可以执行以下操作来简化您的代码。由于您正在重用许多操作，您可以像这样将您的减速器合并为一个：

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减速器导入rootReducer即可。

Answer 2

在你的 reducer 文件的底部，比如你的 things reducer，你可以像这样导出一个常量：

export const thing = combineReducers({ things, isRequesting, requestError });

然后在你的根减速器中，你以同样的方式组合它们：

const rootReducer = combineReducers({
    thingReducer,
    otherThingReducer
})

export default rootReducer

这是一个见仁见智的问题，但我更喜欢创建一个适合您的 things、isRequesting 和 requestError 的减速器，如下所示：

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

const initialThing = {
  data: {},
  isLoading: false,
  isError: false
}

const things = (
  state = initialThing,
  action
) => {
    switch(action.type) {
      case LOAD_THING_REQUESTING:
        return {
          ...state,
          isLoading: true
        };
      case LOAD_THINGS_SUCCESS: 
        return {
          ...state,
          data: action.things,
          isLoading: false,
          isError: false
        };
      case LOAD_THINGS_ERROR:
        return {
          ...state,
          isLoading: false,
          isError: true
        };
      default:
        return state;
    }
}

export default thingsReducer = combineReducers({ things, someOtherReducerFunction });