React：导入 reducer 函数时出现问题

Question

我正在尝试通过 react-redux 提供的提供者使用上下文将 Redux 存储传递给我的组件。我是这样做的：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import { createStore } from 'redux';
import { Provider } from 'react-redux';

import eventsReducer from './GlobalReducer';  // <= IMPORTING

import './index.css';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <Provider store={createStore(eventsReducer)}>
        <BrowserRouter>
            <div>
                <Route component={GlobalHeader} />
                <Route component={GlobalFooter} />
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();

我的 reducer 函数是这样声明的：

GlobalReducer.js

import EventActions from './actions/EventActions';

class GlobalReducer {

    eventsReducer = function(state = {},action) {
        switch(action.type) {
            case "LOAD_INITIAL_STATE":
                return {...state, events: EventActions.load()};
            default:
                return state;
        }
    }

};

module.exports = GlobalReducer.eventsReducer;

碰巧我得到一个错误：

./src/index.js

23:22-35 "export 'default' (imported as 'eventsReducer') was not found in './GlobalReducer'

我什至在这里尝试了箭头语法，但没有用。

我尝试了很多写法：

1) 使用

import GlobalReducer from './GlobalReducer';

然后写

<Provider store={createStore(GlobalReducer.eventsReducer)}>

然后错误变为

Error: Expected the reducer to be a function.

2) 使用

导出函数

module.exports = GlobalReducer.eventReducer;

像

一样导入

import eventsReducer from './GlobalReducer';

然后将其用作

<Provider store={createStore(eventsReducer)}>

然后错误变为

./src/index.js

23:22-35 "export 'default' (imported as 'GlobalReducer') was not found in './GlobalReducer'

我什至尝试将函数从 class 中取出并使用 module.exports 直接导出它。也没用！

我到底做错了什么？正确的做法是什么？

Answer 1

将行 module.exports = GlobalReducer.eventsReducer; 更改为 export default GlobalReducer.eventsReducer;

然后，将其导入：import eventsReducer from './GlobalReducer';。

您将不再使用 GlobalReducer.eventsReducer，而只是 eventsReducer。

Answer 2

这通常是我构建项目的方式。注意文件夹结构的变化。也许这对你也有用。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import { createStore } from 'redux';
import { Provider } from 'react-redux';

import reducers from './reducers';  // <= IMPORTING

import './index.css';

import registerServiceWorker from './registerServiceWorker';

const store = createStore(reducers);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Route component={GlobalHeader} />
                <Route component={GlobalFooter} />
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();

./reducers/index.js

import { combineReducers } from 'redux';
import events from './events';

export default combineReducers({
    events
});

./reducers/events.js

import EventActions from '../actions/EventActions';

export default (state = {}, action) => {
    switch(action.type) {
        case "LOAD_INITIAL_STATE":
            return {...state, events: EventActions.load()};
        default:
            return state;
    }
}

React：导入 reducer 函数时出现问题

React: Problems importing reducer function

javascript

reactjs

redux

index.js

GlobalReducer.js