键入 mapStateToProps React Redux

Question

我无法输入 mapStateToProps 的“状态”参数

如果我只是更改 state : any 而不是 state: AppState 它可以工作并且没有错误。 但我想为我的状态参数输入正确的类型。

现在，我在 connect() 的 mapStateToProps 参数上有这个错误

没有重载匹配这个调用。 最后一个重载给出了以下错误。 '(state: { quiz: IQuizInitialState; }) => StateProps' 类型的参数不可分配给'MapStateToPropsParam' 类型的参数。 无法将类型 '(state: { quiz: IQuizInitialState; }) => StateProps' 分配给类型 'MapStateToPropsFactory'。 参数“状态”和“初始状态”不兼容。 类型“{}”中缺少属性“测验”，但类型“{测验：IQuizInitialState; }'.ts(2769)

interface OwnProps {

}
interface StateProps {

}
interface DispatchProps {

}

type Props = OwnProps & StateProps & DispatchProps;


export class App extends Component<Props> {

  render() {
    return (
     <div>Hey</div>
    );
  }
}

const mapStateToProps = (state: AppState): StateProps => ({ 
})

const mapDispatchToProps = (dispatch: ThunkDispatch<{}, {}, AnyAction>): DispatchProps => {
    return {
    }
}


// The args 'mapStateToProps' generate the error
export default connect<StateProps,DispatchProps,OwnProps>(mapStateToProps, mapDispatchToProps)(App)

这是我的 rootReducer ：

import { combineReducers } from 'redux';
import { QuizReducer } from './quiz';

const rootReducer = combineReducers({
    quiz: QuizReducer
});

export type AppState = ReturnType<typeof rootReducer>


export default rootReducer;

单个reducer是：

import { TYPES } from '../actions/action-types';
import { IQuizListItem, Action } from '../models/index';
import { AnyAction } from 'redux';


export interface IQuizInitialState {
    quizListItem: IQuizListItem[]
}
const quizInitialState: IQuizInitialState = {
    quizListItem: []
}
export const QuizReducer = (state = quizInitialState, action: AnyAction): IQuizInitialState => {
    switch (action.type) {
        case TYPES.getQuizListItems:
            return {
                ...state,
                quizListItem: (action as Action<IQuizListItem[]>).payload
            }

        default:
            return state
    }
}

提前谢谢你们！

Answer 1

您的状态类型与您用于整个状态的类型相同。因为 mapStateToProps 将整个状态传递给选择器。在你的情况下，我相信这将是正确的类型IQuizInitialState。

const mapStateToProps = (state: IQuizInitialState): StateProps => ({ 

})

编辑

在您的评论中，您提到 IQuizInitialState 不是您的整个应用程序状态。那么那个不是你需要的。您需要一个用于整个应用程序状态的类型。为了实现这一点，您可以为每一个 reducer 类型创建一个接口，这意味着您的 IQuizInitialState，但对于其他 reducer 到单个接口中。

由于我没有你的代码库，所以我不得不在这里假设，但考虑

combineReducers({potato: quizReducer, tomato: otherReduzer})

你需要一个类型

interface IApplicationState {
potato: IQuizInitialState;
tomato: IOTherInterfaceYouDefinedForThisReducer;
}

您的 combineReducers 可能看起来像：

combineReducers<IApplicationState>({
  potato: quizReducer,
  tomato: otherReduzer
});

希望你能明白。

编辑 2 在阅读了您的最后一条评论后，我注意到您正在请求带有两个参数的 mapStateToProps。而你只是在定义一个。那么你的连接泛型似乎是错误的。您应该考虑以下几点：

connect<StateProps, DispatchProps, Props, IApplicationState>

地点：

• StateProps : 描述 mapStateToProps() 返回的内容
• DispatchProps：描述 dispatchToProps() 返回的内容
• 道具：你的组件道具
• IApplicationState：代表您的 Apps Redux 整个状态