Ошибка при использовании combReducers «Ошибка: Восстановитель« assetsReducer »возвратил неопределенное значение во время инициализации».

Question

Ошибка: редуктор "assetsReducer" возвратил неопределенное значение во время инициализации.Если состояние, переданное редуктору, не определено, вы должны явно вернуть исходное состояние.Начальное состояние не может быть неопределенным.Если вы не хотите устанавливать значение для этого редуктора, вы можете использовать null вместо undefined.

В моем приложении ReactJS у меня есть 2 редуктора / действия (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))
  )
}

Это должно быть правильно, но я получаю следующую ошибку при наборе текста и консольную ошибку выше, когда яобновите мое приложение на localhost.

Type 'IinitialState' has no properties in common with type 

'DeepPartial <{assetsReducer: {assets: any;загрузка: логическое значение;портфолио: никогда [];Наложение: логическое;};boardReducer: {оверлей: любой;активы: никогда [];портфолио: никогда [];загрузка: логическое значение;};}> '. 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;
  }
};

доска редуктор

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

Помимо другого ответа, похоже, что у вас есть проблема с циклической ссылкой.

store.ts импортирует assetsReducer.ts, но assetsReducer пытается импортировать store, чтобы получить исходное значение состояния по умолчанию.

Поэтому, когда assetsReducer.ts загружается, store.ts еще не завершил оценку, а defaultInitialState не определено.

Вы должны реорганизовать вещи так, чтобы у вас не было циклических ссылок.Больше.Самый простой подход - assetsReducer.ts определить свое собственное значение начального состояния (и экспортировать его отдельно, если на него нужно ссылаться в другом месте).

Answer 2

Ваше начальное состояние неверно.Ваше начальное состояние должно выглядеть примерно так:

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

Более подробную информацию об этом можно найти в Redux Docs