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