如何在单击按钮时启动带有挂钩和Redux的API调用_如何在单击formik表单中的保存按钮时组织两个api调用_如何在单击加号和减号按钮并调用它们的函数时获取要更新的量值 - 腾讯云开发者社区

如何在单击按钮时启动带有挂钩和Redux的API调用

在单击按钮时启动带有挂钩和Redux的API调用，可以按照以下步骤进行：

首先，确保你已经安装了React和Redux，并且项目已经设置好。
创建一个按钮组件，并在其onClick事件处理程序中触发API调用。例如：

import React from 'react';
import { useDispatch } from 'react-redux';
import { fetchData } from 'your-api-utils'; // 替换为你的API工具文件

const ButtonComponent = () => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(fetchData()); // 触发Redux中的action，调用API
  };

  return (
    <button onClick={handleClick}>点击按钮</button>
  );
};

export default ButtonComponent;

创建一个Redux action来处理API调用。在这个action中，你可以使用挂钩来执行异步操作，并在API调用成功或失败时分发相应的Redux action。例如：

import { fetchDataSuccess, fetchDataFailure } from 'your-redux-actions'; // 替换为你的Redux action文件
import { apiCall } from 'your-api-utils'; // 替换为你的API工具文件

export const fetchData = () => {
  return async (dispatch) => {
    try {
      const response = await apiCall(); // 使用挂钩执行API调用

      dispatch(fetchDataSuccess(response.data)); // 分发成功的Redux action，并传递API响应数据
    } catch (error) {
      dispatch(fetchDataFailure(error.message)); // 分发失败的Redux action，并传递错误信息
    }
  };
};

创建相应的Redux reducer来处理Redux action。根据API调用的不同状态，更新应用程序的状态。例如：

import { FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from 'your-redux-action-types'; // 替换为你的Redux action类型文件

const initialState = {
  data: null,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_SUCCESS:
      return {
        ...state,
        data: action.payload,
        error: null,
      };
    case FETCH_DATA_FAILURE:
      return {
        ...state,
        data: null,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

最后，在你的应用程序中使用这个按钮组件，并确保Redux store已经配置和连接到你的应用程序中。例如：

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from 'your-root-reducer'; // 替换为你的根reducer文件
import ButtonComponent from 'your-button-component'; // 替换为你的按钮组件文件

const store = createStore(rootReducer, applyMiddleware(thunk)); // 创建Redux store，并应用中间件

const App = () => {
  return (
    <Provider store={store}>
      <ButtonComponent />
    </Provider>
  );
};

export default App;

这样，当你单击按钮时，它将触发带有挂钩和Redux的API调用，并根据API调用的结果更新应用程序的状态。请注意，上述代码中的"your-api-utils"、"your-redux-actions"、"your-api-utils"、"your-redux-action-types"、"your-root-reducer"和"your-button-component"是需要根据你的项目结构和命名进行替换的。