Question

所以我在redux中是新手，我需要一些作业方面的帮助。我有几个选择，需要将用户选择的选项传递给状态（当用户选择新内容时，该选择已传递给工作状态并且状态正在更新），然后执行可以使用'/stats/${userChoice}'来获取数据的操作。但是我完全不知道该怎么做。

actions / index.js：

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

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

components / 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的状态

Answer 1

您可以通过直接使用事件目标值调用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)
}

如果您仍然希望将其保存在react状态，则可以先执行setState，然后使用（this.state.selectedAuthor）而不是（e.target.value）进行API调用

Answer 2

您已经将分派映射到组件中的FirebaseRecyclerAdapter堆，这意味着您可以在fetchAuthorsStats（或其他任何需要的地方，例如在表单提交中）中使用它，并使用selectedAuthor。

onAuthorSelect

// 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 })
};

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

2 个答案: