如何在react / redux动作中从内部函数中访问变量?

时间:2018-04-02 18:31:44

标签: javascript reactjs react-native

在我的getUnaddedCartItems()函数中,我调用loadCartItems()但我需要访问.then()函数中的const addedItems。这一切都发生在我的购物车动作js文件中。有人可以告诉我如何在内部函数中访问外部变量吗?

export function loadCartItems() {
    return (dispatch, getState) => {
        dispatch({
            type: types.LOAD_CART_PRODUCTS
        });
        return AsyncStorage.getItem(STORAGE_KEY_JWT_TOKEN).then((key) => {
            return API.getCartItems(key)
                .then((response) => {
                    return dispatch({
                        type: types.LOAD_CART_PRODUCTS_SUCCESS,
                        response
                    });
                }).catch(err => {
                    console.log('Error retrieving cart products');
                })
        }).catch(err => {
            console.log("Error retrieving cart items from local storage");
        });
    };
}



export function getUnaddedCartItems() {
        return (dispatch, getState) => {
            dispatch({
                type: types.GET_UNADDED_ITEMS
            });        
            return AsyncStorage.getItem(STORAGE_KEY_CART_ITEMS).then((result) => {
                const addedItems = JSON.parse(result);

                loadCartItems()(dispatch, getState).then((result) => {
                    const cartItems = result.response.products;

                    const unaddedCartItems = addedItems.filter((addedItem) => {
                        return cartItems.find(cartItem => cartItem.id !== addedItem.productId);
                    });

                    return unaddedCartItems;
                }).catch(err => {
                    console.log('error: ', err);
                });
            }).catch(error => {
                console.log('error: ', error);
            });
        };
    }

1 个答案:

答案 0 :(得分:1)

尝试删除行尾的return关键字

return AsyncStorage.getItem(STORAGE_KEY_CART_ITEMS).then((result) => {

如果过早地结束执行,那可能会阻止你的内部函数运行。

另外,我看到你打电话了

dispatch({
    type: types.GET_UNADDED_ITEMS
});

在函数的开头,

但是之后你没有其他任何地方派遣行动。我认为您需要在内部return unaddedCartItems的末尾发送适当的操作,而不是then()

<强>更新

更换

loadCartItems()(dispatch, getState).then((result) => {
    const cartItems = result.response.products;

    const unaddedCartItems = addedItems.filter((addedItem) => {
        return cartItems.find(cartItem => cartItem.id !== addedItem.productId);
    });

    return unaddedCartItems;
}).catch(err => {
    console.log('error: ', err);
});

使用dispatch(loadCartItems())可能有助于实现预期的结果。在没有dispatch的情况下调用它不会将它连接到您在.then的内部loadCartItems内使用的redux商店