javascript - Can't connect Redux store to React Typescript App - Stack Overflow

admin管理员组

文章数量:1434924

I'm trying to connect Redux Store to my TypeScript-React app, but receiving the following error:

No overload matches this call. Overload 1 of 2, '(props: Readonly>): Provider', gave the following error. 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. Type '() => any' is not assignable to type 'Store'.ts(2769) index.d.ts(461, 5): The expected type es from property 'store' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<...>' index.d.ts(461, 5): The expected type es from property 'store' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<...>'

here is my index.tsx ponent:

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="/" ponent={LoginPage} />
    </Switch>
  </Provider>
);

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

and my store:

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;
  }
};

Should I specify the type of a store somewhere?

I'm trying to connect Redux Store to my TypeScript-React app, but receiving the following error:

No overload matches this call. Overload 1 of 2, '(props: Readonly>): Provider', gave the following error. 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. Type '() => any' is not assignable to type 'Store'.ts(2769) index.d.ts(461, 5): The expected type es from property 'store' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<...>' index.d.ts(461, 5): The expected type es from property 'store' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<...>'

here is my index.tsx ponent:

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="/" ponent={LoginPage} />
    </Switch>
  </Provider>
);

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

and my store:

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;
  }
};

Should I specify the type of a store somewhere?

• javascript
• reactjs
• typescript
• redux

Share Improve this question Follow edited Feb 25, 2020 at 11:20 ROOT 11.6k55 gold badges3434 silver badges4848 bronze badges asked Feb 25, 2020 at 10:59 KarenKaren 1,42955 gold badges2727 silver badges5050 bronze badges 2

• From where you are getting this countReducer under store.js ? – Mayank Pandeyz Commented Feb 25, 2020 at 11:26
• You have to pass the reducer or bined reducer under createStore(), in your case you are passing it but haven't imported it may be this is the issue – Mayank Pandeyz Commented Feb 25, 2020 at 11:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You exported store as a function, but using it like a variable. 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="/" ponent={LoginPage} />
        </Switch>
      </Provider>
    );

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

本文标签： javascriptCan39t connect Redux store to React Typescript AppStack Overflow