Question

我第一次使用typescript为redux设置存储时遇到错误。

错误消息如下：

元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。
  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
    );

我的configurestore：

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。

Redux存储：元素类型无效：期望一个字符串

1 个答案: