当前位置：首页 > React

react函数如何调用redux

2026-03-10 15:24:44React

在React函数组件中调用Redux

使用React函数组件调用Redux需要结合react-redux库提供的Hooks API。以下是具体实现方式：

使用useSelector读取状态

useSelector允许从Redux store中提取数据。它接收一个选择器函数，返回需要的state部分：

import { useSelector } from 'react-redux';

function MyComponent() {
  const counter = useSelector(state => state.counter);
  return <div>{counter}</div>;
}

使用useDispatch分发action

useDispatch返回store的dispatch方法，用于触发action：

import { useDispatch } from 'react-redux';
import { increment } from './actions';

function MyComponent() {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Increment
    </button>
  );
}

完整示例

结合两个Hook的典型用法：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

性能优化

当组件需要从store获取多个值时，建议：

合并多个useSelector调用
使用memoized选择器（如reselect库）
对子组件使用React.memo防止不必要的重渲染

替代方案

对于类组件或特殊场景，仍可使用传统的connect高阶组件：

react函数如何调用redux

import { connect } from 'react-redux';

const MyComponent = ({ value, dispatchAction }) => (
  // 组件实现
);

export default connect(
  state => ({ value: state.value }),
  { dispatchAction }
)(MyComponent);