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

Posted 2023-02-22

【中文标题】无法将 Redux 商店连接到 React Typescript App

【英文标题】：Can't connect Redux store to 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，在你的情况下你正在通过它但没有导入它可能是这个问题

【参考方案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'));