javascript - connectrouter - Reaccionar+Redux-router=Error no detectado: Se esperaba que el reductor fuera una función

react router connect

Question

Mi código funciona bien, pero tengo un problema molesto cada vez que cometo un error de codificación y obtengo un error de tiempo de ejecución. Por ejemplo, en una de mis páginas JSX hice Date() lugar de la new Date() y en lugar de informar el error real, obtuve ...

Uncaught Error: Expected the reducer to be a function.

Cualquier error que cometo casi siempre aparece así. Se informa desde createStore.js , que se encuentra en mi código de configureStore.jsx continuación.

¿Hay alguna forma de obtener un mejor informe de errores que me ayude a identificar el problema real? Cualquier ayuda o ideas son muy apreciadas !!!

Aquí está mi configuración para la referencia ...

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

Cambia la siguiente línea:

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

A:

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

Answer 2

Mi problema era importar Store desde la ruta del reductor raíz en lugar de la raíz del almacén empaquetado real (con devtools en la ventana y el reductor raíz, el middleware está compuesto, etc.).

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

cambiado a

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

Answer 3

Use export const variable_name lugar de const variable_name cuando quiera exportar esa variable.

Por ejemplo: rootReducer.jsx debe reescribirse como

import { combineReducers } from ''redux'';
import { routerStateReducer } from ''redux-router'';
import siteReducer from ''./siteReducer'';
export const rootReducer = combineReducers({
router: routerStateReducer,
sites: siteReducer
});
export default rootReducer;

Tenga en cuenta el especificador de exportación adicional con const rootReducer