无法将 Redux 商店连接到 React Typescript App答案

【问题标题】：Can't connect Redux store to React Typescript App无法将 Redux 商店连接到 React Typescript App
【发布时间】：2020-06-09 02:16:44
【问题描述】：

我正在尝试将 Redux Store 连接到我的 TypeScript-React 应用程序，但收到以下错误：

没有重载匹配这个调用。重载 1 of 2, '(props: Readonly>): Provider'，给出了以下错误。类型 '() => any' 缺少以下属性来自“Store”类型：调度、getState、订阅、 replaceReducer, [Symbol.observable] 重载 2 of 2, '(props: ProviderProps, context?: any): Provider', 给以下错误。类型 '() => any' 不可分配给类型 'Store'.ts(2769) index.d.ts(461, 5)：预期类型来自此处在类型“IntrinsicAttributes &”上声明的属性“商店” 内在类属性> & 只读> & 只读<...>' index.d.ts(461, 5）：预期类型来自声明的属性“商店” 在这里类型'IntrinsicAttributes＆内在类属性> & 只读> & 只读<...>'

这是我的 index.tsx 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { Route, Switch } from 'react-router-dom';
import store from './store/index';

import './styles/index.scss';

import LoginPage from './app/routes/LoginPage';

const App = () => (
  <Provider store={store}>
    <Switch>
      <Route path="/" component={LoginPage} />
    </Switch>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

和我的商店：

store.js

import { createStore } from 'redux';

export default configureStore = () => {
  const store = createStore(countReducer);
  return store;
};

reducer.js：

const countReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

我应该在某处指定商店的类型吗？

【问题讨论】：

你从哪里得到这个countReducer在store.js下？
你必须通过createStore()下的reducer或组合reducer，在你的情况下你正在通过它但没有导入它可能是这个问题

标签： javascript reactjs typescript redux

【解决方案1】：

您将store 导出为函数，但将其用作变量。不要忘记调用该函数。


    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { ConnectedRouter } from 'connected-react-router';
    import { Route, Switch } from 'react-router-dom';
    import store from './store/index'; // store is a function
    import './styles/index.scss';   
    import LoginPage from './app/routes/LoginPage';

    const App = () => (
      <Provider store={store()}> // <- Call the function here
        <Switch>
          <Route path="/" component={LoginPage} />
        </Switch>
      </Provider>
    );

    ReactDOM.render(<App />, document.getElementById('root'));

【讨论】：