web-dev-qa-db-fra.com

React + Redux-router = Uncaught Error: Le réducteur devait être une fonction

Mon code fonctionne bien, mais j'ai un problème gênant chaque fois que je fais une erreur de codage et que je reçois une erreur d'exécution. Par exemple, dans l'une de mes pages JSX, j'ai fait Date() au lieu de new Date() et au lieu de signaler l'erreur réelle, j'ai ... 

Uncaught Error: Expected the reducer to be a function.

Toute erreur que je fais est presque toujours la même. Cela est rapporté à partir de createStore.js, qui se trouve dans mon code configureStore.jsx ci-dessous.

Existe-t-il un moyen d'obtenir un meilleur rapport d'erreurs qui m'aide à identifier le vrai problème? Toute aide ou idées sont grandement appréciées !!!

Voici ma configuration pour référence ....

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

Changer la ligne suivante:

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

À:

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

Utilisez export const variable_name au lieu de const variable_name chaque fois que vous souhaitez exporter cette variable. 

Par exemple, rootReducer.jsx devrait être ré-écrit comme

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

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

Notez le spécificateur d'exportation supplémentaire avec const rootReducer

4
Umang Gupta

Mon problème importait Store à partir du chemin du réducteur racine plutôt que de la racine du magasin intégré (avec devtools sur la fenêtre et le réducteur de racine, le middleware en cours de composition, etc.).

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

changé en

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

0
lxm7