Question

我正在将Redux与redux-thunk结合使用，以从API检索类别。我有一个名为viewCategory的操作，它取决于存储状态下的类别。

我使用了从Redux网站获取Reddit帖子的示例： https://redux.js.org/advanced/asyncactions#actions-js-asynchronous

我遇到的问题是，当我致电viewCategory时，诺言认为它是在派发REQUEST_CATEGORIES而不是RECEIVE_CATEGORIES时解决的。因此，如果在then语句中记录我的状态，空类别列表。

export function viewCategory(urlKey) {
    return (dispatch, getState) => {
        dispatch(fetchCategoriesIfNeeded()).then(() => {
            let state = getState();
            console.log(state); // should have categories
            let categories = [...state.categories.mainCategories,
                ...state.categories.specialCategories];
            let matchCategory = categories.find((category) => {
                return category.custom_attributes.find(x => x.attribute_code === "url_key").value === urlKey;
            });

            dispatch({
                type: Categories.VIEW_CATEGORY,
                category: matchCategory
            });
        });
    };
}

决定是否应提取类别的函数：

function shouldFetchCategories(state) {
    const categories = state.categories;
    if(categories.isFetching || categories.mainCategories.length > 0) {
        return false;
    } else {
        return true;
    }
}

export function fetchCategoriesIfNeeded() {
    return (dispatch, getState) => {
        if(shouldFetchCategories(getState())) {
            return dispatch(fetchCategories());
        } else {
            return Promise.resolve();
        }
    };
}

包含实际提取调用的函数：

function fetchCategories() {
    return (dispatch, getState) => {
        dispatch(requestCategories());
        const {locale} = getState().settings;
        return fetch(`${BASE_URL}/categories/list`, {
            method: "POST",
            headers: {
                "Accept-Language": locale
            },
            body: "Not interesting for stackoverflow"
        })
            .then(response => response.json())
            .then(json => {
                if(json !== undefined && json.items){
                    dispatch(receiveCategories(json.items));
                }
            });
    };
}

我分配类型REQUEST_CATEGORIES和RECEIVE_CATEGORIES的函数：

function requestCategories() {
    return {
        type: Categories.REQUEST_CATEGORIES
    };
}

function receiveCategories(result) {
    const mainCategories = result.filter(category => category.level === 2);
    const subCategories = result.filter(category => category.level === 3);

    const categories = mainCategories.map(category => {
        let children = subCategories.filter(x => x.parent_id === category.id);
        return {
            ...category,
            children
        };
    });

    let specialCategories = categories.splice(categories.length - 2, 2);
    return {
        type: Categories.RECEIVE_CATEGORIES,
        categories: categories,
        specialCategories: specialCategories,
        receivedAt: Date.now()
    };
}

你知道我在做什么错吗？如果您需要任何其他代码或信息，请告诉我。

异步操作会在获取提取结果之前解决

0 个答案: