React / Redux / Thunk / TypeScript - Dispatch не работает

Итак, я новичок в Redux Thunk и достаточно новичок в TypeScript, и я не могу заставить свой редуктор срабатывать, когда я вызываю Dispatch (dispatch(updateCountries(countries));). Я использую следующие пакеты:

"@types/query-string": "^6.1.0",
"@types/react-redux": "^6.0.6",
"@types/redux-thunk": "^2.1.0",
"pivotal-ui": "^16.1.0",
"query-string": "^6.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-scripts-ts": "2.13.0",
"redux-thunk": "^2.3.0"

Мое состояние определяется как

export interface Country {
    id: string;
    name: string;
}

export default class AppState {
    countries: Country[];
}

Я создаю свой магазин с

export type Actions = { type: TypeKeys.UPDATE_COUNTRIES, countries: Country[] } |
    { type: TypeKeys.ADD_ERROR, message: string };

const initialState = localStorage[searchVehicles] ?
JSON.parse(localStorage[searchVehicles]) : new AppState();

const store = createStore(countries, initialState, applyMiddleware(thunk as ThunkMiddleware<AppState, Actions>));

У меня есть следующие действия

export function updateCountries(countries: Country[]): ThunkAction<Country[], AppState, undefined, Actions> {
    return (dispatch, getState) => countries;
}

export function fetchCountries(): ThunkAction<void, AppState, undefined, Actions> {
    return (dispatch, getState) => {
        fetch('http://localhost:49870/api/countries')
        .then(response => response.json())
        .then(countries => {
            dispatch(updateCountries(countries));
        });
    };
} 

В моей SearchForm в componentDidMount я вызываю this.props.fetchCoutries();, который настраивается через мой контейнер, он выглядит так

const mapStateToProps = (state: AppState) => {
    return {
        countries: state.countries
    };
};

const mapDispatchToProps = (dispatch: ThunkDispatch<AppState, void, Actions>) => {
    return {
        fetchCoutries: () => dispatch(fetchCountries())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(SearchForm);

Мой редуктор выглядит как

export const countries = (state: Country[] = [], action: Actions): Country[] => {
    switch (action.type) {
        case TypeKeys.UPDATE_COUNTRIES:
            return state;
        default:
            break;
    }
    return state;
};

Кто-нибудь может понять, почему мой редуктор не вызывается?

Я вижу здесь много кода, но не совсем уверен, что вы хотите. Можете ли вы свести код к простой воспроизводимой задаче?

theMayer 14.08.2018 05:53

Я попытался избавиться от него и добавил код редуктора ... Надеюсь, это поможет :)

andrewjboyd 14.08.2018 05:59

Откуда вы знаете, что вам не звонят?

theMayer 14.08.2018 06:01

Состояние не заполняется, поэтому мой раскрывающийся список не заполнен значениями ... Я также использую VS Code с установленной точкой останова, которая не выполняется

andrewjboyd 14.08.2018 06:03

оффтоп: typescript-fsa стоит проверить

Daniel Khoroshko 14.08.2018 13:02

@DanielKhoroshko, этот фреймворк проще? Какой у вас опыт работы с этим?

andrewjboyd 15.08.2018 11:48

это не фреймворк, а небольшой помощник для написания редукторов redux в машинописном тексте более безопасным и дружелюбным способом

Daniel Khoroshko 15.08.2018 12:11

и я обнаружил, что это очень чистый и ясный подход

Daniel Khoroshko 15.08.2018 12:11

Спасибо @DanielKhoroshko, хотя я не мог заставить этот код работать, typescript-fsa было намного проще, чем использовать thunk

andrewjboyd 27.08.2018 07:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
9
606
0

Другие вопросы по теме