¿Por qué mi función react/redux no devuelve una promesa?

¿Por qué mi función react/redux no devuelve una promesa?

Estoy en las acciones de mi carrito y estoy llamando a loadCartItems() desde otra función dentro del mismo archivo. Sin embargo, esta función no devuelve una promesa ni ningún dato y no sé por qué. Mi función loadCartItems() ni siquiera se reconoce como una función en realidad. ¿Alguien sabe por qué puede ser esto?

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()
                .then((result) => {
                    const cartItems = result.response.products;

                    if (this.state.unaddedCartItems.length === 0) {
                        const unaddedCartItems = addedItems.filter((addedItem) => {
                            return cartItems.find(cartItem => cartItem.id !== addedItem.productId);
                        });
                    }
                }).catch(err => {
                    consoel.log('error: ', err);
                });
        }).catch(error => {
            console.log('error: ', error);
        });
    };
}

ingrese la descripción de la imagen aquí

Mostrar la mejor respuesta

this.loadCartItems() no es una función. loadCartItems() es.

Dado que no están en una clase/objeto/algo común, no hay necesidad de usar this. Básicamente actúa como un global (dentro del contexto de ese archivo), así que simplemente llámelo directamente.


Mirándolo un poco más de cerca, parece que está tratando de llamar a un creador de acciones dentro de un creador de acciones. Ese es tu problema.

Normalmente, mapea estas acciones dentro de su componente, por lo que se encarga del bit dispatch por usted. Sin embargo, cuando usted mismo llama a la función directamente, también debe manejarla usted mismo.

loadCartItems().then es lo que no es una función ahora que ha eliminado this. Eso tiene sentido, ya que loadCartItems() en realidad devuelve una función, no un Promise. La función acepta dos argumentos: dispatch y getState.

Tienes que llamarlo así: loadCartItems()(dispatch, getState).then().

Ok, acabo de actualizar mi pregunta. Intenté usarlo sin 'esto'. delante de loadCartItems() pero todavía dice que no es una función. ¿¿Por qué??

En realidad no dice que loadCartItems() no es una función

Dice que loadCartItems(...).then no es una función.

¿Qué significa?

De hecho, loadCartItems(...).then no es una función, porque la función no devuelve un Promise. ¡Devuelve otra función!

Como se indica en redux-thunk docs:

Cualquier valor de retorno de la función interna estará disponible como el valor de retorno del propio envío.

Entonces, para llamar correctamente a su acción loadCartItems(), debe hacer

dispatch(loadCartItems(anyParamYouWant)).then(...)

Te recomiendo que eches un vistazo a los documentos de redux-thunk para ayudarte a entender mejor cómo funcionan los thunks ;)

Tanto loadItems como getUnaddedCartItems devuelven thunks, no promesas.

Por lo tanto, deben enviarse primero, para que devuelvan las promesas que espera.

Ese código de envío antes de devolver la promesa parece ser innecesario, así que si de hecho no lo necesita, simplemente haga que las funciones devuelvan las promesas.