javascript - 使用 combineReducers 时出错 “错误：Reducer ‘assetsReducer’ 在初始化期间返回了 undefined。”

错误：Reducer “assetsReducer” 在初始化期间返回了未定义。如果传递给 reducer 的状态是未定义的，你必须明确返回初始状态。初始状态不能是未定义的。如果你不想为此 reducer 设置值，可以使用 null 来代替 undefined。

在我的 ReactJS 应用中，我有两个 reducers/actions（assets 和 board）。

在我的 store.ts 文件中，我像这样使用 combineReducers：

import { applyMiddleware, createStore, combineReducers } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'

import { IinitialState } from './shared/types'
// import reducer from './reducers/assets/'
import assetsReducer from './reducers/assets'
import boardReducer from './reducers/board'

const rootReducer = combineReducers({
  assetsReducer,
  boardReducer
});

export const defaultInitialState = {
  assets: [],
  portfolio: [],
  loading: false,
  overlay: false
};

console.log('rootReducer', rootReducer);

export function initializeStore(initialState: IinitialState = defaultInitialState) {
  return createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

这应该是正确的，但当我在本地主机刷新我的应用时，我得到了以下 TypeScript 错误，以及上面的控制台错误。

Type 'IinitialState' has no properties in common with type 

'DeepPartial<{ assetsReducer: { assets: any; loading: boolean; portfolio: never[]; overlay: boolean; }; boardReducer: { overlay: any; assets: never[]; portfolio: never[]; loading: boolean; }; }>.ts(2559)'

资产Reducer：

import { Actions } from '../actions/assets'
import { defaultInitialState } from '../store'

export default (state = defaultInitialState, action: any) => {
  switch (action.type) {
    case Actions.GET_ALL_ASSETS: {
      const { assets } = action;
      return {
        ...state,
        assets,
        loading: false
      };
    }

    default:
      return state;
  }
};

boardReducer

import { Actions } from '../actions/board'
import { defaultInitialState } from '../store'

export default (state = defaultInitialState, action: any) => {
  switch (action.type) {
    case Actions.SET_OVERLAY_STATE: {
      const { overlay } = action;
      return {
        ...state,
        overlay
      };
    }

    default:
      return state;
  }
};

答案＃1

您的初始状态不正确。您的初始状态应该看起来像这样：

export const defaultInitialState = {
  assetsReducer: {assets: [], loading: false, portfolio: [], overlay: false},
  boardReducer: {assets: [], loading: false, portfolio: [], overlay: false},
}

有关此的更多信息可以在 Redux 文档中找到

答案＃2

除了其他回复之外，看起来你有一个循环引用的问题。

store.ts 导入了 assetsReducer.ts，但是 assetsReducer 试图导入 store 来获取它的初始默认状态值。

因此，当 assetsReducer.ts 加载时，store.ts 尚未完成评估，defaultInitialState 是未定义的。

你应该重新组织事物，这样就不会再有循环引用了。最简单的方法是让 assetsReducer.ts 定义它自己的初始状态值（如果需要在其他地方引用，也可以单独导出它）。