Не удается подключить магазин Redux к приложению React Typescript

Question

Я пытаюсь подключить Redux Store к моему приложению TypeScript-React, но получаю следующую ошибку:

Нет перегрузки, которая соответствует этому вызову. Перегрузка 1 из 2, '(props: Readonly>): Provider', вызвала следующую ошибку. В типе '() => any' отсутствуют следующие свойства из типа 'Store': диспетчеризация, getState, подписка, replaceReducer, [Symbol.observable] Перегрузка 2 из 2, '(props: ProviderProps, context ?: any): поставщик , дал следующую ошибку. Тип «() => любой» нельзя назначить типу «Store» .ts (2769) index.d.ts (461, 5): ожидаемый тип происходит из свойства «store», которое объявлено здесь для типа «IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly <...> 'index.d.ts (461, 5): ожидаемый тип поступает из свойства store, которое объявлено здесь для типа' IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly < ...> '

вот мой 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'));

и мой магазин:

магазин. js

import { createStore } from 'redux';

export default configureStore = () => {
  const store = createStore(countReducer);
  return store;
};

редуктор. js:

const countReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

Должен ли я где-то указать тип магазина?

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