在单击按钮时启动带有挂钩和Redux的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;
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,并传递错误信息
}
};
};
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;
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"是需要根据你的项目结构和命名进行替换的。
领取专属 10元无门槛券
手把手带您无忧上云