javascript - 使用 Redux 存储作为 Post API 调用的输入

Question

我在 React 中构建了一个输入接口(interface)，并将数据存储在 Redux 状态中。

然后，我为 Post API 调用创建了一个新操作。如果“data”参数是一个常量(我作为测试创建的)，则一切正常。

实际上，我想使用 Redux 状态中的键作为数据参数。

在该示例中，我收到错误，因为未定义 props。将这一行动与国家联系起来有意义吗？如果是，该怎么做？非常感谢!

import axios from 'axios';

export const show_query_action = () => {
  return dispatch => {
    dispatch(show_query_started_action());
    axios({
      method: 'post',
      url:'http://127.0.0.1:5000/show_query',
      data: this.props.reducer_components
    })
      .then(res => {
        dispatch(show_query_success_action(res));
      })
      .catch(err => {
        dispatch(show_query_failure_action(err.message));
      });
  };
};

const show_query_started_action = () => ({
  type: 'ADD_SHOW_QUERY_STARTED'
});

const show_query_success_action = todo => ({
  type: 'ADD_SHOW_QUERY_SUCCESS',
  payload: {
    ...todo
  }
});

const show_query_failure_action = error => ({
  type: 'ADD_SHOW_QUERY_FAILURE',
  payload: {
    error
  }
});

Answer 1

如果需要使用 React 组件中的不同参数进行调用，您可以将数据参数作为操作创建器的参数:

export const show_query_action = (data) => {
  return dispatch => {
    dispatch(show_query_started_action());
    axios({
      method: 'post',
      url:'http://127.0.0.1:5000/show_query',
      data: data
    })

这也很容易测试。如果您仅使用 redux 存储中的参数调用此操作，则可以使用 redux-thunk 中的第二个参数(我假设您在这里使用):

export const show_query_action = () => {
  return (dispatch, getState) => {
    const data = getState().data; -> you would specify in wich part of the state your data lives, this is just an example
    dispatch(show_query_started_action());
    axios({
      method: 'post',
      url:'http://127.0.0.1:5000/show_query',
      data: data
    })

希望这有帮助。