Can't connect Redux store to React Typescript App

Question

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 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<...>'

here is my index.tsx component:

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

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?

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

joy08 · Accepted Answer · 2020-02-25 11:21:04Z

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

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

edited Feb 25, 2020 at 11:21

joy08

9,6729 gold badges43 silver badges81 bronze badges

answered Feb 25, 2020 at 11:04

Roman Mahotskyi

6,9199 gold badges54 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can't connect Redux store to React Typescript App

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related