title: React: Problems importing reducer function
body: <p>I'm trying to user pass a Redux store to my components using context, with the Provider provided by <code>react-redux</code>. I am doing this way:</p>
  
  <h3>index.js</h3>
  
  <pre><code>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';  // &lt;= IMPORTING
  
  import './index.css';
  
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(
      &lt;Provider store={createStore(eventsReducer)}&gt;
          &lt;BrowserRouter&gt;
              &lt;div&gt;
                  &lt;Route component={GlobalHeader} /&gt;
                  &lt;Route component={GlobalFooter} /&gt;
              &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  registerServiceWorker();
  </code></pre>
  
  <p>My reducer function is declared this way:</p>
  
  <h3>GlobalReducer.js</h3>
  
  <pre><code>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;
  </code></pre>
  
  <p>It happens that I get an error:</p>
  
  <blockquote>
    <blockquote>
      <p>./src/index.js</p>
      
      <p>23:22-35 "export 'default' (imported as 'eventsReducer') was not found in './GlobalReducer'</p>
    </blockquote>
  </blockquote>
  
  <p>I even tried the arrow syntax here, but it didn't help.</p>
  
  <p>I tried writing it in many ways:</p>
  
  <p>1) Using</p>
  
  <pre><code>import GlobalReducer from './GlobalReducer';
  </code></pre>
  
  <p>and then writing</p>
  
  <pre><code>&lt;Provider store={createStore(GlobalReducer.eventsReducer)}&gt;
  </code></pre>
  
  <p>and then the error changes to </p>
  
  <blockquote>
    <blockquote>
      <p>Error: Expected the reducer to be a function.</p>
    </blockquote>
  </blockquote>
  
  <p>2) Exporting the function with</p>
  
  <pre><code>module.exports = GlobalReducer.eventReducer;
  </code></pre>
  
  <p>importing it like</p>
  
  <pre><code>import eventsReducer from './GlobalReducer';
  </code></pre>
  
  <p>and then using it as</p>
  
  <pre><code>&lt;Provider store={createStore(eventsReducer)}&gt;
  </code></pre>
  
  <p>and then the error changes to</p>
  
  <blockquote>
    <blockquote>
      <p>./src/index.js</p>
      
      <p>23:22-35 "export 'default' (imported as 'GlobalReducer') was not found in './GlobalReducer'</p>
    </blockquote>
  </blockquote>
  
  <p>I even tried to take the function out of the class and export it directly using <code>module.exports</code>. It didn't work too!</p>
  
  <p>What exactly am I doing wrong? What is the correct way to do this?</p>