输入 mapStateToProps React Redux

Question

我无法输入 mapStateToProps 的 "state" 参数

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

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

No overload matches this call. The last overload gave the following error. Argument of type '(state: { quiz: IQuizInitialState; }) => StateProps' is no assignable to parameter of type 'MapStateToPropsParam'. Cannot assign the type '(state: { quiz: IQuizInitialState; }) => StateProps' to type 'MapStateToPropsFactory'. Parameters 'state' and 'initialState' are not compatible. Property 'quiz' is missing in type '{}' but required in type '{ 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
});

希望你明白了。

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

connect<StateProps, DispatchProps, Props, IApplicationState>

其中：

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

输入 mapStateToProps React Redux

Typing mapStateToProps React Redux

typing

typescript

reactjs

redux