javascript - 使用combineReducers "Error: Reducer "assetReducer时出错“初始化期间返回未定义”。

Question

Error: Reducer "assetsReducer" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.

在我的 ReactJS 应用程序中，我有 2 个 reducer /操作(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)

---

assetsReducer:

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;
  }
};

Answer 1

您的初始状态不正确。您的初始状态应如下所示:

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

有关这方面的更多信息可以在 Redux Docs 中找到。