react如何使用dispatch
使用 useDispatch 钩子
在 React 组件中，通过 react-redux 提供的 useDispatch 钩子获取 dispatch 函数。导入 useDispatch 后，直接调用即可：
import { useDispatch } from 'react-redux';
function MyComponent() {
const dispatch = useDispatch();
// 调用 dispatch 发送 action
dispatch({ type: 'ACTION_TYPE', payload: data });
}定义 Action
通常会将 action 定义为函数（Action Creator），便于复用和维护。Action 是一个普通对象，包含 type 和可选的 payload：
const increment = (amount) => ({
type: 'INCREMENT',
payload: amount
});
// 使用
dispatch(increment(5));结合 Redux Thunk 处理异步
使用 redux-thunk 中间件时，dispatch 可以接受函数作为参数，用于处理异步逻辑（如 API 调用）：
const fetchData = () => {
return async (dispatch) => {
dispatch({ type: 'FETCH_START' });
try {
const response = await fetch('api/url');
const data = await response.json();
dispatch({ type: 'FETCH_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_ERROR', payload: error });
}
};
};
// 使用
dispatch(fetchData());在 Class 组件中使用 dispatch
若使用类组件，需通过 connect 高阶组件将 dispatch 注入 props：
import { connect } from 'react-redux';
class MyClassComponent extends React.Component {
handleClick = () => {
this.props.dispatch({ type: 'ACTION_TYPE' });
};
render() {
return <button onClick={this.handleClick}>Dispatch</button>;
}
}
export default connect()(MyClassComponent);直接调用 Store 的 dispatch
在非组件文件中（如工具函数），可直接从 store 实例调用 dispatch：
import store from './store';
store.dispatch({ type: 'ACTION_TYPE' });注意事项
- 确保 Redux store 已通过
Provider提供给应用顶层组件。 - Action 的
type建议使用常量，避免拼写错误。 - 异步逻辑推荐使用
redux-thunk或redux-saga等中间件。
