0

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

我的应用程序使用 Redux 来维护一个问题表。

状态.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。

问题.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);

我的顶级应用程序显示了这个容器组件。

应用程序.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即使mapStateToPropsdereferences ，我也无法弄清楚为什么该字段存在state.questions.questions。

设置它的正确方法是什么？

4

1 回答 1

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
});

这就是我看到你的减速器的方式

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

于 2019-11-23T17:21:29.410 回答