0

Пытаюсь разобраться c TypeScript в Redux, есть такой rootReducer:

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk"
import { TEST_CONST } from '../actions/actionTypes'

interface state {
    result: string
}
const initialState: state = {
    result: 'test'
}

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case TEST_CONST:
            return state
        default:
            return state
    }
}

const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
)

export default store

Все работает как должно, кроме одного момента: в строке const rootReducer = (state = initialState, action) => { редактор вполне ожидаемо ругается на параметр action, так как он имеет тип any. Однако если я поставлю ему какой-то тип (например, action: string), то редактор ругается уже на следующую строку, то есть switch (action.type) выдает мне Property 'type' does not exist on type 'string'. Возможно, это глупый вопрос, но может эта проблема просто решается тем, что я поставлю какой-то специальный тип для параметра action? Буду благодарен за помощь в понимании этого вопроса

1 ответ 1

0

Что ж, нашел такую альтернативу: файл actionTypes полностью удаляем и создаем интерфейс Action:

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk"

interface stateTypes {
    result: string
}
interface Action {
    type: 'TEST';
    TEST: string
}

const initialState: stateTypes = {
    result: 'test'
}

const rootReducer = (state = initialState, action: Action) => {
    switch (action.type) {
        case 'TEST':
            return state
        default:
            return state
    }
}

const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
)

export default store

В дальнейшем, чтобы использовать несколько экшенов, можно использовать такую конструкцию:

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk"

interface stateTypes {
    result: string
}
interface ActionOne {
    type: 'TEST';
    TEST: string
}
interface ActionTwo {
    type: 'FOO';
    FOO: string
}
type Action = ActionOne | ActionTwo

const initialState: stateTypes = {
    result: 'test'
}

const rootReducer = (state = initialState, action: Action) => {
    switch (action.type) {
        case 'TEST':
            return state
        default:
            return state
    }
}

const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
)

export default store

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.