Question

因此，我是Redux Thunk的新手，并且是TypeScript的新手，在我调用Dispatch（dispatch(updateCountries(countries));）时无法启动我的reducer。我正在使用以下软件包：

"@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;
};

谁能看到为什么我的异径管没有被叫到？

React / Redux / Thunk / TypeScript-调度不起作用

0 个答案: