在同构应用程序中使用redux

Question

I'm trying to create a isomorphic/universal app with react+redux+express, and I'm having some problems to create the store from server.js.

In server.js I have:

import { configureStore } from './store/configureStore';
const store = configureStore();

In my configureStore:

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger'
import rootReducer from '../reducers/index';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers').default
      store.replaceReducer(nextRootReducer)
    })
  }

  return store;
}

And I get this error:

TypeError: (0 , _configureStore.configureStore) is not a function

on line: const store = configureStore();

Why ? what I'm doing wrong ?

If can be useful know, my directory structure is like this: - src -- store ---- configureStore.js -- server.js

Answer 1

You're exporting a default value so remove the curlies around your import:

import configureStore from './store/configureStore';

Alternatively, remove the default from your export and continue using curlies.

Whenever you see that error it's usually cause of how you import/export functions so pay close attention to those and you'll be good to go!