键入mapStateToProps React

Question

我无法键入mapStateToProps的"state“参数

如果我只是更改state : any而不是state: AppState，它就能工作并且没有错误。但是，我希望对状态参数进行正确的键入。

现在，在connect()的mapStateToProps param上有这个错误

没有重载与此调用匹配。最后一次重载导致以下错误。类型'(state：{ quiz: IQuizInitialState；}) => StateProps‘的参数不能分配给'MapStateToPropsParam’类型的参数。无法将类型‘(状态：{ quiz: IQuizInitialState；}) => StateProps’指定为“MapStateToPropsFactory”。参数'state‘和'initialState’不兼容。属性'quiz‘在类型'{}’中缺失，但在类型'{ quiz: 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;

唯一的减速器是：

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并不是您的整个应用程序状态。那你就不需要那个了。您需要一个用于整个应用程序状态的类型。要实现这一点，您可以为每一个还原器类型创建一个接口，这意味着您的IQuizInitialState，但是对于其他还原器而言，可以创建一个接口。

由于我没有您的代码库，所以我必须在这里添加代码，但是请考虑

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

你需要一种类型

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

您的combineReducers可能看起来像：

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

我希望你明白这个想法。

阅读最后一条评论后，我注意到您要求使用两个参数的mapStateToProps。而你只是定义了一个。那么，您的连接仿制似乎是错误的。你应该考虑以下几点：

connect<StateProps, DispatchProps, Props, IApplicationState>

其中：

mapStateToProps()

• DispatchProps:返回的内容描述由dispatchToProps()

• 道具返回的内容:您的组件道具

• IApplicationState:表示您的应用程序、Redux、整个状态