Redux mapStateToProps 与 TypeScript 不匹配

Question

我有以下带有 TypeScript 的 React 组件：

import React from 'react';
import {connect, ConnectedProps} from 'react-redux';
import logo from './assets/logo.png';
// import { Counter } from './features/counter/Counter';
import './App.css';

import {IApplicationState} from './features/application/reducers';

const mapStateToProps = (application: IApplicationState) => {
  const applicationComposite = application.applicationComposite;

  return {applicationComposite};
}
const connector = connect(mapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>

interface Props extends PropsFromRedux {};

class App extends React.Component<Props> {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <span>
            <span>Attractora </span>
            {this.props.applicationComposite && <span>{this.props.applicationComposite.content}</span>}
          </span>
        </header>
      </div>
    );
  }
}

export default connector(App);

问题是我将applicationComposite 变成undefined，即使reducer 的初始状态有一个值。

我调试了代码，发现mapStateToProps(application: IApplicationState)在application.application.applicationComposite中接收到了applicationComposite的值，但是当我尝试分配applicationComposite = application.application.applicationComposite时，却出现了这个错误：

Property 'application' does not exist on type 'IApplicationState'.

我关注了this tutorial，但我找不到我做错了什么。

编辑

这是我的根减速器：

import {combineReducers} from 'redux';
import application from '../features/application/reducers';

const rootReducer = combineReducers({
  application,
});

export default rootReducer;

这是我的应用程序缩减器：

import { Dictionary } from '@reduxjs/toolkit';
import { ActionInterface } from '../generals';
import {
  FETCH_APPLICATION_COMPOSITE_SUCCESS,
  SET_CURRENT_APPLICATION_COMPONENT
} from './actions';

export interface IApplicationState {
  applicationComposite: any,
  currentApplicationComponent: string | null,
}

const INIT_STATE = {
  applicationComposite: {content: 'test_content'},
  currentApplicationComponent: null
}

export default (state=INIT_STATE, action: ActionInterface) => {
  switch(action.type) {
    case FETCH_APPLICATION_COMPOSITE_SUCCESS: {
      return {
        ...state,
        //@ts-ignore: Object is possibly 'undefined'
        applicationComposite: action.payload.applicationComposite
      }
    }
    case SET_CURRENT_APPLICATION_COMPONENT: {
      return {
        ...state,
        //@ts-ignore: Object is possibly 'undefined'
        currentApplicationComponent: action.payload.applicationComponent
      }
    }
    default: {
      return state;
    }
  }
}

Answer 1

据我所知，我认为您没有在 mapStateToProps 函数中使用根状态类型。

应用程序只是 redux 状态的一部分，因此您无法直接在 mapStateToProps() 中访问应用程序状态。 您应该将根状态类型声明为所有状态的中心点

export interface IRootState {
    application: IApplicationState
}

const rootReducer = combineReducers<IRootState>({
  application,
});

const mapStateToProps = (rootState: IRootState) => {
  const applicationComposite = rootState.application.applicationComposite;

  return {applicationComposite};
}