Подтвердить что ты не робот

React + Redux-router = Неисправная ошибка: ожидается, что редуктор будет функцией

Мой код работает нормально, но у меня есть раздражающая проблема, когда я делаю ошибку кодирования и получаю ошибку времени выполнения. Например, на одной из моих страниц JSX я сделал Date() вместо new Date() и вместо сообщения о фактической ошибке, я получил...

Uncaught Error: Expected the reducer to be a function.

Любая ошибка, которую я делаю почти всегда, появляется. Он сообщается из createStore.js, который находится в моем коде configureStore.jsx ниже.

Есть ли способ, с помощью которого я могу получить отчет об ошибках, который поможет мне определить реальную проблему? Любая помощь или идеи очень ценятся!!!

Здесь моя настройка для справки....

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;
    }
}
4b9b3361

Ответ 1

Измените следующую строку:

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

To:

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

Ответ 2

Используйте export const variable_name вместо const variable_name всякий раз, когда вы хотите экспортировать эту переменную.

Для примера: rootReducer.jsx следует переписать как

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

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

Обратите внимание на дополнительный спецификатор экспорта с константой rootReducer

Ответ 3

Моя проблема заключалась в том, чтобы импортировать Store из корневого пути редуктора вместо фактического связанного корня хранилища (с devtools на окне и корневым редуктором, составлением промежуточного слоя и т.д.).

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

изменено на

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