Печатание хранилища инструментария Redux в TypeScript

Question

Я пытаюсь начать использовать Redux в React + TypeScript, поэтому я следую учебным пособиям по Redux Toolkit и пытаюсь реализовать его в примере приложения.

У меня много трудностей с наборами текста относительно store и параметры функции mappStateToProps.

Я настроил хранилище с помощью фрагмента следующим образом:

import { configureStore } from '@reduxjs/toolkit'

import linksReducer from '../features/links/linksSlice'

const store = configureStore({
  reducer: {
    links: linksReducer,
  },
})

export default store
export type AppStore = typeof store

И я подключил компонент следующим образом:

import React from 'react'
import { connect, ConnectedProps } from 'react-redux'

import { AppStore } from '../../features/appStore'
import { deleteLink } from '../../features/links/linksSlice'

import LinkCard from './LinkCard'
import Link from '../../models/Link'
import EmptyList from './EmptyList'

const mapStateToProps = (state: any) => ({
  links: state.links,
})
const mapDispatchToProps = { deleteLink }
const connector = connect(mapStateToProps, mapDispatchToProps)

const LinksGrid = (props: ConnectedProps<typeof connector>) => {
  //  ...
}

export default connector(LinksGrid)

Как видите, я использовал тип any для первого аргумента функции mapStateToProps, потому что я не могу узнать, как я должен его печатать. Используя any, у меня нет проблем с запуском приложения, поэтому я предполагаю, что у меня проблема только с печатанием.

Официальная документация RTK дает только пример использования combineReducers вместо configureStore, и это использует TS ReturnType<T>, который может работать только с функцией, но, конечно, переменная store не является функцией, поэтому она не работает.
Я также прочитал документацию по Redux и React Redux, но до сих пор не могу понять что делать.

Я уверен, что это на самом деле просто, но вот я ... Может кто-нибудь помочь мне заставить этот набор текста работать?

Спасибо:)

Answer 1

Обе обучающие программы Redux Toolkit и Использование с TypeScript На страницах документации показано, как это сделать правильно.

Во-первых, это не тип магазин это важно здесь. Это тип состояния магазина .

Если вы используете combineReducers() самостоятельно, вы можете определить этот тип как:

const rootReducer = combineReducers({
    first: firstReducer,
    second: secondReducer,
});

type RootState = ReturnType<typeof rootReducer>

Однако, поскольку вы используя сокращенную форму установки, передавая редукторы срезов в configureStore (что вызывает combineReducers() для внутреннего использования), вы можете сделать то же самое, проверив тип возврата store.getState вместо этого:

const store = configureStore({
    reducer: {
        first: firstReducer,
        second: secondReducer,
    }

});

type RootState = ReturnType<typeof store.getState>

Затем Как показано в документации, вы можете импортировать тип RootState в файл компонента и использовать его в качестве типа в функции mapState:

import {RootState} from "app/store";

const mapStateToProps = (state: RootState) => ({
  links: state.links,
})

Answer 2

Это работает у меня:

store?: EnhancedStore<{ default: RootState }, AnyAction, [ThunkMiddleware]>;

дополнительно я добавил redux-thunk для ThunkMiddleware