React redux с использованием состояния в создателе действий

Я пытаюсь создать создателя действий с методом, который раньше входил в логику моего компонента. Я понимаю, как превратить его в создателя действий; однако я не уверен, как обойти тернарный оператор, поскольку он полагается на что-то, исходящее из локального состояния. this.state.searchTerm, а также this.state.data.currentPage необходимы для того, чтобы код работал так, как мне нужно.

export const loadMoreMovies = () => {
    return dispatch => {
        const searchEndpoint = `${SEARCH_BASE_URL}${this.state.searchTerm}&page=${this.state.data.currentPage + 1}`;
        const popularEndpoint = `${POPULAR_BASE_URL}&page=${this.state.data.currentPage + 1}`;

        const endpoint = this.state.searchTerm ? searchEndpoint : popularEndpoint;

        dispatch(fetchMovies(endpoint, 'search'));
    }
}

Кроме того, может ли кто-нибудь подтвердить для меня то, что вы видите в создателе действий? Есть ли причина создавать редуктор для этого создателя действий? Кажется, я не вижу причин для одного, поскольку он не используется для изменения состояния, но мне хотелось бы, чтобы другие мнения об этом. Спасибо


person albert_anthony6    schedule 02.03.2020    source источник


Ответы (1)


При работе с redux-thunk функция, которую вы возвращаете от создателя действия, может иметь два аргумента, второй из которых является функцией, которая дает вам текущее состояние:

export const loadMoreMovies = () => {
  return (dispatch, getState) => {
    const state = getState();
    const searchEndpoint = `${SEARCH_BASE_URL}${state.searchTerm}&page=${state.data.currentPage + 1}`;
    const popularEndpoint = `${POPULAR_BASE_URL}&page=${state.data.currentPage + 1}`;



    const endpoint = state.searchTerm ? searchEndpoint : popularEndpoint;

    dispatch(fetchMovies(endpoint, 'search'));
  }
}
person Damien Flury    schedule 02.03.2020
comment
Есть ли причина, по которой использование getState по какой-либо причине считается плохой практикой? - person albert_anthony6; 02.03.2020