React Redux onClick 号召性用语创建者不工作

Question

我在 Button 中有一个 onClick 调用。我正在调用一个方法 (handleQuery) 来向我的减速器分派一个动作。这是按钮和 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);
 };

React Redux onClick 号召性用语创建者不工作

React Redux onClick Call to Action Creator Not Working

javascript

reactjs

semantic-ui

redux