Как я могу передать состояние в действие для получения API? - PullRequest
Новая
       13

Как я могу передать состояние в действие для получения API?

0 голосов
/ 03 мая 2019

, так что я новичок в редуксе, и мне нужно немного помочь с домашней работой. У меня есть выпадающий список с двумя вариантами выбора, и выбор, который выбирает пользователь, должен быть передан в состояние (оно уже работает, и состояние обновляется, когда пользователь выбирает что-то новое), а затем в действие, которое может извлекать данные с помощью '/stats/${userChoice}'. Но я понятия не имею, как это сделать вообще.

действия / index.js: 

export const fetchAuthorsStats = () => async dispatch => {
    const response = await myAPI.get(`/stats/${userChoice}`);

    dispatch({ type: 'FETCH_AUTHORS_STATS', payload: response.data })
};

Компоненты / Dropdown.js: 

onAuthorSelect = (e) => {
        this.setState({selectAuthor: e.target.value})
    };

.
.
.

const mapStateToProps = state => {
    return {
        authors: state.authors,
        selectAuthor: state.selectAuthor,
        authorsStats: state.authorsStats
    }
};


export default connect(mapStateToProps, { fetchAuthors, selectAuthor, fetchAuthorsStats })(Dropdown)

в разделе "selectAuthor" у меня есть состояние, которое мне нужно передать этому действию API

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Вы уже сопоставили диспетчеризацию с fetchAuthorsStats thunk в своем компоненте, что означает, что вы можете просто использовать его в onAuthorSelect (или где угодно, например, при отправке формы) и передать ему параметр с selectedAuthor. 

// Added a userChoice param here:
export const fetchAuthorsStats = (userChoice) => async dispatch => {
    const response = await myAPI.get(`/stats/${userChoice}`);

    dispatch({ type: 'FETCH_AUTHORS_STATS', payload: response.data })
};


onAuthorSelect = (e) => {
  this.setState({selectAuthor: e.target.value})    
  this.props.fetchAuthorsStats(e.target.value);
};
0 голосов
/ 03 мая 2019

Этого можно добиться, вызвав API напрямую со значением цели события: 

/// first you update your API call to receive the selected author
export const fetchAuthorsStats = (userChoice) => async dispatch => {
    const response = await myAPI.get(`/stats/${userChoice}`);

    dispatch({ type: 'FETCH_AUTHORS_STATS', payload: response.data })
};

//then you update your handler function

onAuthorSelect = (e) =>{
this.props.fetchAuthorsStats(e.target.value)
}

Если вы хотите сохранить его в состоянии реакции, вы можете сначала выполнить setState, а затем вызвать API с помощью(this.state.selectedAuthor) вместо (e.target.value)

...