Mein Code funktioniert einwandfrei, aber ich habe ein ärgerliches Problem, wenn ich einen Codierungsfehler mache und einen Laufzeitfehler bekomme. In einer meiner JSX-Seiten habe ich zum Beispiel Date()
anstelle von new Date()
gemacht und anstatt den eigentlichen Fehler zu melden, bekam ich
Uncaught Error: Expected the reducer to be a function.
Jeder Fehler, den ich mache, erscheint fast immer als dieser. Es wird von createStore.js
gemeldet, der sich unten in meinem configureStore.jsx
-Code befindet.
Gibt es eine Möglichkeit, bessere Fehlermeldungen zu erhalten, die mir helfen, das eigentliche Problem zu erkennen? Jede Hilfe oder Idee wird sehr geschätzt !!!
Hier ist mein Setup als Referenz ....
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;
}
}
Ändern Sie die folgende Zeile:
const nextRootReducer = require('../reducers/rootReducer');
Zu:
const nextRootReducer = require('../reducers/rootReducer').default;
Verwenden Sie export const variable_name
anstelle von const variable_name
, wenn Sie diese Variable exportieren möchten.
Für ex: rootReducer.jsx sollte als neu geschrieben werden
import { combineReducers } from 'redux';
import { routerStateReducer } from 'redux-router';
import siteReducer from './siteReducer';
export const rootReducer = combineReducers({
router: routerStateReducer,
sites: siteReducer
});
export default rootReducer;
Beachten Sie den zusätzlichen Exportbezeichner mit const rootReducer
Mein Problem bestand darin, Store aus dem Root-Reducer-Pfad zu importieren und nicht aus dem eigentlichen gebündelten Store-Root (mit devtools im Fenster und Root-Reducer, Middleware usw.).
import Store from '../../../src/state/Store/reducer';
gewechselt zu
import Store from '../../../src/state/Store';