当前位置：首页 > React

react如何使用dispatch

2026-01-23 23:56:38React

使用 `useDispatch` 钩子

在函数组件中，通过 react-redux 提供的 useDispatch 钩子获取 dispatch 函数。引入 useDispatch 后直接调用即可：

import { useDispatch } from 'react-redux';

function MyComponent() {
  const dispatch = useDispatch();
  // 使用 dispatch 发送 action
  dispatch({ type: 'ACTION_TYPE', payload: data });
}

绑定 Action Creators

通过 bindActionCreators 将多个 action 创建函数自动绑定到 dispatch，减少手动调用。通常与 useDispatch 结合使用：

react如何使用dispatch

import { bindActionCreators } from 'redux';
import { action1, action2 } from './actions';

function MyComponent() {
  const dispatch = useDispatch();
  const actions = bindActionCreators({ action1, action2 }, dispatch);
  // 直接调用 actions
  actions.action1(data);
}

在类组件中使用 `connect`

类组件中通过 connect 高阶组件将 dispatch 注入为 props。若未传递 mapDispatchToProps，默认将 dispatch 作为 prop 提供：

react如何使用dispatch

import { connect } from 'react-redux';

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.dispatch({ type: 'ACTION_TYPE', payload: data });
  };
}
export default connect()(MyComponent);

通过 `mapDispatchToProps` 简化调用

在 connect 中定义 mapDispatchToProps，将 action 创建函数映射为组件的 props，避免直接操作 dispatch：

const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch(fetchDataAction()),
});
export default connect(null, mapDispatchToProps)(MyComponent);

使用 Redux Toolkit 的 `dispatch`

Redux Toolkit 的 createSlice 自动生成 action 创建函数，可直接通过 dispatch 调用：

import { configureStore } from '@reduxjs/toolkit';
import mySlice from './mySlice';

const store = configureStore({ reducer: mySlice.reducer });
// 调用生成的 action
store.dispatch(mySlice.actions.increment());