时间戳

首页 > 解决方案 > 如何将状态传递给操作以获取 API？

javascript - 如何将状态传递给操作以获取 API？

问题描述

所以我是 redux 的新手，我的作业需要一些帮助。我有一个包含几个选项的下拉列表，用户选择的选项需要传递给状态（已经有这个工作并且当用户选择新的东西时状态正在更新），然后传递给可以使用'/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 的状态

标签： javascriptreactjsreduxredux-thunk

解决方案

您可以通过使用事件目标值直接调用 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，然后使用 (this.state.selectedAuthor) 而不是 (e.target.value) 进行 API 调用

推荐阅读