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

Roman Mahotskyi Roman Mahotskyi · Accepted Answer · 2020-02-25T11:04:00

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'));

Can't connect Redux store to React Typescript App

1 Answers