React + Redux-router = Uncaught Error: ожидается, что редуктор будет функцией

Question

Мой код работает нормально, но у меня есть неприятная проблема, когда я делаю ошибку кодирования и получаю ошибку времени выполнения. Например, в одном из моих страниц JSX я Date() вместо new Date() и вместо того, чтобы сообщать фактическую ошибку, я получил ...

Uncaught Error: Expected the reducer to be a function. 

Любая ошибка я делаю почти всегда показывает, как это. Сообщается от createStore.js, что находится в моем configureStore.jsx нижеприведенном коде.

Есть ли способ, которым я могу улучшить сообщение об ошибках, что поможет мне определить реальную проблему? Любая помощь или идеи приветствуются !!!

Вот моя установка для справки ....

main.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { ReduxRouter } from 'redux-router'; 
import configureStore from './store/configureStore' 
import routes from './routes'; 

const rootEl = document.getElementById('app-container'); 

const store = configureStore(); 

ReactDOM.render(
    <div> 
     <Provider store={store}> 
      <ReduxRouter routes={routes} /> 
     </Provider> 
    </div> 
    , rootEl 
); 

configureStore.jsx

import { createHashHistory } from 'history'; 
import { applyMiddleware, createStore, compose } from 'redux'; 
import { reduxReactRouter } from 'redux-router'; 

import thunk from 'redux-thunk'; 
import promiseMiddleware from 'redux-promise-middleware'; 

import rootReducer from '../reducers/rootReducer'; 
import routes from '../routes'; 

export default function configureStore(initialState = {}) { 

    const history = createHashHistory(); 

    const middlewares = [ 
     thunk, 
     promiseMiddleware({ 
      promiseTypeSuffixes: ['PENDING','SUCCESS','ERROR'] 
     }) 
    ]; 

    const toolChain = [ 
     applyMiddleware(...middlewares), 
     reduxReactRouter({ 
      routes, 
      history 
     }) 
    ]; 

    const store = compose(...toolChain)(createStore)(rootReducer, initialState); 

    if (module.hot) { 
     module.hot.accept('../reducers',() => { 
      const nextRootReducer = require('../reducers/rootReducer'); 
      store.replaceReducer(nextRootReducer); 
     }); 
    } 
    return store; 
} 

rootReducer.jsx

import { combineReducers } from 'redux'; 
import { routerStateReducer } from 'redux-router'; 
import siteReducer from './siteReducer'; 

const rootReducer = combineReducers({ 
    router: routerStateReducer, 
    sites: siteReducer 
}); 
export default rootReducer; 

siteReducer.jsx

import {GET_SITES} from '../actions/siteActions'; 

const defaultState = { 
    isPending: null, 
    isSuccess: null, 
    isError: null, 
    error: null, 
    data: null 
}; 

export default function siteReducer(state = defaultState, action) { 

    switch (action.type) { 
     case `${GET_SITES}_PENDING`: 
      return { 
       ...defaultState, 
       isPending: true 
      }; 
     case `${GET_SITES}_SUCCESS`: 
      return { 
       ...defaultState, 
       isSuccess: true, 
       error: false, 
       data: action.payload 
      }; 
     case `${GET_SITES}_ERROR`: 
      return { 
       ...defaultState, 
       isError: true, 
       error: action.payload 
      }; 
     default: 
      return state; 
    } 
} 

Answer 1

Использование export const variable_name вместо const variable_name всякий раз, когда вы хотите экспортировать эту переменную.

Для экс: rootReducer.jsx должен быть переписан в

import { combineReducers } from 'redux'; 
import { routerStateReducer } from 'redux-router'; 
import siteReducer from './siteReducer'; 

export const rootReducer = combineReducers({ 
router: routerStateReducer, 
sites: siteReducer 
}); 
export default rootReducer; 

Обратите внимание на дополнительный экспорт спецификатора с сопзЬ rootReducer

Answer 2

Изменить следующую строку:

const nextRootReducer = require('../reducers/rootReducer'); 

To:

const nextRootReducer = require('../reducers/rootReducer').default; 

Answer 3

Моя проблема заключалась в том, чтобы импортировать Store из корневого пути редуктора вместо фактического связанного корня хранилища (с devtools на окне и корневым редуктором, составлением промежуточного программного обеспечения и т. Д.).

import Store from '../../../src/state/Store/reducer';

изменен

import Store from '../../../src/state/Store';