React Redux onClick呼吁行动创建者不起作用

Question

我在Button中有一个onClick呼叫。我正在调用一个方法（handleQuery）将操作分派给我的reducer。这是按钮和handleQuery调用的相关代码。我尝试了各种方法来对按钮进行onClick调用，但是在Redux中看不到任何形式的调度。

import { fetchData } from "../reducers/baseballReducer";

 const handleQuery = query => {
    fetchData(query);
  };

<Tab.Pane>
          <Button onClick={() => handleQuery("t205")} value="t205">
            T205
          </Button>
</Tab.Pane>

const mapDispatchToProps = {
  fetchData
};

这是我的减速器：

export const fetchData = query => {
  return async dispatch => {
    const queryBaseball = await baseballService.getByQuery(query);
    dispatch({
      type: "QUERY_DATA",
      data: queryBaseball
    });
  };
};



    const baseballReducer = (state = [], action) => {
  switch (action.type) {
    case "INIT_BLOGS":
      console.log("Data", action.data);
      return action.data;
    case "UPDATE_DATA":
      return action.data;
    case "QUERY_DATA":
      return action.data;
    default:
      return state;
  }
};

然后最后这是我对后端的axios调用

const getByQuery = query => {
  const request = axios.get(baseUrl + `?keyword=${query}`);
  console.log("Request", request);
  return request.then(response => response.data);
};

Answer 1

您正在使用mapDispatchToProps，因此您的函数fetchData可以获取“ DISPATCH”，但是要获取它，您必须通过prop调用它，而不是直接fetchData（）

 const handleQuery = query => {
    this.props.fetchData(query);
 };