[英]Can't connect Redux store to React Typescript App
I'm trying to connect Redux Store to my TypeScript-React app, but receiving the following error:我正在尝试将 Redux Store 连接到我的 TypeScript-React 应用程序,但收到以下错误:
No overload matches this call.没有重载匹配这个调用。 Overload 1 of 2, '(props: Readonly>): Provider', gave the following error.重载 1 of 2, '(props: Readonly>): Provider',出现以下错误。 Type '() => any' is missing the following properties from type 'Store': dispatch, getState, subscribe, replaceReducer, [Symbol.observable] Overload 2 of 2, '(props: ProviderProps, context?: any): Provider', gave the following error.类型 '() => any' 缺少类型 'Store' 中的以下属性:dispatch, getState, subscribe, replaceReducer, [Symbol.observable] Overload 2 of 2, '(props: ProviderProps, context?: any): Provider ',出现以下错误。 Type '() => any' is not assignable to type 'Store'.ts(2769) index.d.ts(461, 5): The expected type comes from property 'store' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<...>' index.d.ts(461, 5): The expected type comes from property 'store' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<...>'类型 '() => any' 不能分配给类型 'Store'.ts(2769) index.d.ts(461, 5):预期的类型来自属性 'store',它在类型 'IntrinsicAttributes & 上声明IntrinsicClassAttributes> & Readonly> & Readonly<...>' index.d.ts(461, 5): 预期类型来自属性 'store',它在类型 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly< 上声明...>'
here is my index.tsx component:这是我的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'));
and my store:和我的商店:
store.js商店.js
import { createStore } from 'redux';
export default configureStore = () => {
const store = createStore(countReducer);
return store;
};
reducer.js :减速器.js :
const countReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};
Should I specify the type of a store somewhere?我应该在某处指定商店的类型吗?
You exported store
as a function, but using it like a variable.您将store
作为函数导出,但将其用作变量。 Don't forget to invoke the function.不要忘记调用该函数。
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'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.