webentwicklung-frage-antwort-db.com.de

Reagieren + Redux-Router = Nicht gefundener Fehler: Es wurde erwartet, dass der Reduzierer eine Funktion ist

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;
    }
}
18
baronnoraz

Ändern Sie die folgende Zeile:

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

Zu:

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

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

4
Umang Gupta

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';

0
lxm7