React redux, полезная нагрузка действия не может видеть переменную в блоке try / catch

Question

Я пытаюсь поместить переменную «result» в полезную нагрузку действия, но ее невозможно определить, потому что она находится в блоке try. Я не уверен, как обойти это. Я все еще новичок в Redux, и вот само действие.

export const fetchMovies = async (endpoint, category) => {
    const isLoadMore = endpoint.search('page');
    try{
        const result = await (await fetch(endpoint)).json();
    } catch(error){
        this.setState({error: true});
        console.log(error);
    }

    return{
        type: HomeActionTypes.FETCH_MOVIES,
        payload: result, category, isLoadMore
    }
}

Я попытался инициализировать результат сверху, используя let, но это не решило проблему. Кроме того, я не уверен, правильно ли я устанавливаю полезную нагрузку с помощью переменных, которые я установил в них. Например, их необходимо использовать в редукторе, и я предполагаю, что элементы внутри полезной нагрузки должны вызываться как action.payload.result, action.payload.category, action.payload.isLoadMore везде, где мне нужно использовать их в редукторе. , Это правильный способ сделать это? Спасибо за любой вклад в помощь ответить на мои вопросы.

Answer 1

Вы можете использовать разные подходы. Первый, тот, который вы пытаетесь, вы должны объявить переменную result как let (чтобы вы могли изменить ее значение) в соответствующей лексической области, так что в этом случае за пределами скобки try и внутри функции декларация, чтобы return мог получить доступ к своему значению.

export const fetchMovies = async (endpoint, category) => {
    const isLoadMore = endpoint.search('page');
    let result = null
    try{
        result = await (await fetch(endpoint)).json();
    } catch(error){
        this.setState({error: true});
        console.log(error);
    }

    return{
        type: HomeActionTypes.FETCH_MOVIES,
        payload: result, category, isLoadMore
    }
}

Другой подход, которому я бы предпочел следовать, - это переместить все логики c счастливого потока в скобку try и управляйте действием, возвращаемым в потоке ошибок в фигурной скобке catch:

export const fetchMovies = async (endpoint, category) => {
    try{
        const isLoadMore = endpoint.search('page');
        const result = await (await fetch(endpoint)).json();
        return{
          type: HomeActionTypes.FETCH_MOVIES,
          payload: result, category, isLoadMore
        }
    } catch(error){
        // Rather than modifying the state, use a defined error action to trigger the proper error flow and logic.
        console.log(error);
        return{
          type: HomeActionTypes.FETCH_MOVIES_ERROR, // To be defined in the way you desire to be able to manage it as the execution of this action
          payload: error
        }
    }
}