javascript - React Redux 连接函数中的 Typescript 错误

Question

我正在尝试按照 Redux Getting Started 中的文档使用 Typescript 编写 React Redux 组件和 Proper Typing of react-redux Connected Components我的 connect 函数出现类型错误。

我的应用使用 Redux 来维护问题表。

state.tsx

import {AnyAction, combineReducers} from "redux";

const ADD_QUESTION = "ADD_QUESTION";

export interface Question {
    id: number,
    text: string
}

export interface State {
    questions: QuestionsTable
}

interface QuestionsTable {
    nextId: number,
    questions: Question[]
}

const questions = (state: State = {questions: {nextId: 0, questions: []}}, action: AnyAction): State => {
    const questions = state.questions;
    switch (action.type) {
        case ADD_QUESTION:
        return {
            ...state,
            questions: {
                ...questions,
                nextId: questions.nextId + 1,
                questions: questions.questions.concat([{id: questions.nextId, text: action.text}])
            }
        };
        default:
            return questions
    }
};

export const reducers = combineReducers({
    questions
});

Questions 组件会显示它们。我使用 connect 从中创建 QuestionsContainer。

questions.tsx

import React from "react"
import {Question, State} from "../state";
import {connect} from "react-redux";

export type QuestionsProps = {
    questions: Question[]
}

const Questions: React.FC<QuestionsProps> = ({questions}) => {
    return (
        <div>
            <ul>
                {questions.map(question => (
                    <li>{question.text}</li>
                ))}
            </ul>
        </div>
    )
};

const mapStateToProps = (state: QuestionsTable): QuestionsProps => {
    return {questions: state.questions.questions};
};

export const QuestionsContainer = connect<QuestionsProps>(mapStateToProps)(Questions);

我的顶级应用程序显示此容器组件。

App.tsx

import React from "react";
import "./App.css";
import {reducers} from "./state";
import {createStore} from "redux"
import {Provider} from "react-redux"
import {QuestionsContainer} from "./components/questions";

const store = createStore(reducers);
const App: React.FC = () => {
    return (
        <Provider store={store}>
            <div className="App">
                <QuestionsContainer/>
            </div>
        </Provider>
    );
};

export default App;

我在调用 connect 时遇到类型错误。

Error:(61, 59) TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '(state: State) => QuestionsProps' is not assignable to parameter of type 'MapStateToPropsParam<QuestionsProps, {}, {}>'.
      Type '(state: State) => QuestionsProps' is not assignable to type 'MapStateToPropsFactory<QuestionsProps, {}, {}>'.
        Types of parameters 'state' and 'initialState' are incompatible.
          Property 'questions' is missing in type '{}' but required in type 'State'.

如果我使用 @ts-ignore 抑制此错误并记录传递给我的 Questions 组件的 questions 值，我会看到这一点。

{"nextId":0,"questions":[]}

我无法弄清楚为什么 nextId 字段在那里，即使 mapStateToProps 取消引用 state.questions.questions。

正确的设置方法是什么？

Answer 1

好的 我会通过电话尝试 抱歉格式化了

import {AnyAction, combineReducers} from "redux";

const ADD_QUESTION = "ADD_QUESTION";

export interface Question {
    id: number,
    text: string
}

interface State {
    nextId: number,
    items: Question[]
}

const initialState: State = {nextId: 0,  items: []}

const questions = (state = initialState, action: AnyAction): State => {
    switch (action.type) {
        case ADD_QUESTION:
        return {
            ...state,
            items: action.items,
            nextId: action.nextId
        };
        default:
            return state
    }
};

export const reducers = combineReducers({
    questions
});

这就是我对你的 reducer 的看法

然后在mapStateToProps的组件中 问题:state.questions.items