reactjs - 输入 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;

单个 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类型创建一个接口(interface)，这意味着您的IQuizInitialState，但为其他reducer创建一个接口(interface)。

我必须在这里假设，因为我没有你的代码库，但考虑

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:您的组件 props
• IApplicationState:代表您的 Apps Redux 整个状态