Ввод mapStateToProps Реагировать Redux - PullRequest
Новая
       15

Ввод mapStateToProps Реагировать Redux

1 голос
/ 19 октября 2019

Я не могу набрать параметр "состояния" mapStateToProps

Если я просто изменю state : any вместо state: AppState, он будет работать и не будет ошибки. Но я хотел бы иметь правильную типизацию для моего параметра состояния.

На данный момент у меня есть эта ошибка в параметре mapStateToProps connect ()

Никакая перегрузка не соответствует этому вызову,Последняя перегрузка дала следующую ошибку. Аргумент типа '(state: {quiz: IQuizInitialState;}) => StateProps' нельзя назначить параметру типа 'MapStateToPropsParam'. Невозможно назначить тип «(state: {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
    }
}

Спасибозаранее ребята!

1 Ответ

7 голосов
/ 22 октября 2019

Тип вашего штата совпадает с типом, который вы используете для всего штата. поскольку mapStateToProps принимает все состояние, чтобы передать его селекторам. в вашем случае я считаю, что это будет правильный тип IQuizInitialState. 

const mapStateToProps = (state: IQuizInitialState): StateProps => ({ 

})

РЕДАКТИРОВАТЬ

В своем комментарии вы упоминаете IQuizInitialState isntвсе ваше состояние приложения. Тогда этот не тот, который вам нужен. Вам нужен тип для всего состояния приложения. Чтобы добиться этого, вы можете создать интерфейс для каждого типа редуктора, то есть вашего IQuizInitialState , но для других редукторов в единый интерфейс.

Я должен здесь остановиться, поскольку у меня нет вашей кодовой базы, но подумайте: 

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

вам понадобится тип 

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

, вероятно ваш комбинатор будет выглядеть так: 

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

Надеюсь, вы поняли идею.

EDIT 2 После прочтения вашего последнего комментария я заметил, что вы запрашиваете mapStateToProps с двумя аргументами. и вы просто определяете один. Тогда ваши дженерики подключения кажутся неправильными. Вы должны учитывать следующее: 

connect<StateProps, DispatchProps, Props, IApplicationState>

где:

  • StateProps: описывает, что было возвращено mapStateToProps ()
  • DispatchProps: описывает, что возвращается dispatchToProps()
  • Реквизиты: Ваш компонент реквизит
  • IApplicationState: Представляет все состояние вашего приложения Redux
...