Redux 存储：元素类型无效：应为字符串

Question

我第一次使用 typescript 为 redux 设置商店时出错。

错误信息如下：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

  11 | // tslint:disable-next-line
  12 | const store = configureStore(undefined);
  13 | 
> 14 | render(
  15 |   <Provider store={store}>
  16 |     <ConnectedRouter history={createHistory()}>
  17 |       <App />

 import * as React from 'react';
    import {render} from 'react-dom';
    import {ConnectedRouter} from 'react-router-redux';
    import {Provider} from 'react-redux';
    import configureStore from './store/configureStore';
    import createHistory from 'history/createBrowserHistory';

    import App from './App';
    import './styles/styles.css';

    // tslint:disable-next-line
    const store = configureStore(undefined);

    render(
      <Provider store={store}>
        <ConnectedRouter history={createHistory()}>
          <App />
        </ConnectedRouter>
      </Provider>,
      document.getElementById('root') as HTMLElement
    );

我的配置存储：

import {createStore} from 'redux';
import rootReducer from '../reducers';

interface WindowModuleHot extends Window {
  module: {
    hot: {
      accept: (path: string, callback: () => void) => void;
    };
  };
}

export default function configureStore(initialState: any) {
  const store = createStore(rootReducer, initialState);
  const hotWindow = window as WindowModuleHot;

  if (hotWindow.module && hotWindow.module.hot) {
    // Enable Webpack hot module replacement for reducers
    hotWindow.module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers');
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

Answer 1

ConnectedRouter 适用于 react-router-redux 的 version 5.0。 npm 当前指向 v4.0.8 here。