Итак, я новичок в 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;
};
Кто-нибудь может понять, почему мой редуктор не вызывается?
Я попытался избавиться от него и добавил код редуктора ... Надеюсь, это поможет :)
Откуда вы знаете, что вам не звонят?
Состояние не заполняется, поэтому мой раскрывающийся список не заполнен значениями ... Я также использую VS Code с установленной точкой останова, которая не выполняется
оффтоп: typescript-fsa стоит проверить
@DanielKhoroshko, этот фреймворк проще? Какой у вас опыт работы с этим?
это не фреймворк, а небольшой помощник для написания редукторов redux в машинописном тексте более безопасным и дружелюбным способом
и я обнаружил, что это очень чистый и ясный подход
Спасибо @DanielKhoroshko, хотя я не мог заставить этот код работать, typescript-fsa было намного проще, чем использовать thunk





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