React Redux connect函数的使用指南与实战技巧

// 定义一个纯展示组件
function TodoList({ todos, toggleTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.text} {todo.done ? '✅' : '⏳'}
        </li>
      ))}
    </ul>
  );
}
 
// 使用 connect 升级为“智能组件”
export default connect(
  state => ({ todos: state.todos }),     // mapStateToProps
  { toggleTodo: actions.toggleTodo }     // mapDispatchToProps
)(TodoList);

// ❌ 反例：整棵状态树传入，任何风吹草动都会触发重渲染
const mapStateToPropsBad = state => ({ state });
 
// ✅ 正例：精确订阅，使用 Reselect 做记忆化
import { createSelector } from 'reselect';
 
const getVisibleTodos = createSelector(
  [state => state.todos, state => state.visibilityFilter],
  (todos, filter) => {
    switch (filter) {
      case 'SHOW_COMPLETED': return todos.filter(t => t.done);
      case 'SHOW_ACTIVE':   return todos.filter(t => !t.done);
      default:              return todos;
    }
  }
);
 
const mapStateToProps = state => ({
  todos: getVisibleTodos(state)
});

// 写法 A：对象简写 —— 源码内部自动 bindActionCreators，推荐！
const mapDispatchToProps = {
  addTodo: actions.addTodo,
  toggleTodo: actions.toggleTodo
};
 
// 写法 B：函数返回对象 —— 需要手动 dispatch，适合依赖 props 的动态场景
const mapDispatchToProps = dispatch => ({
  addTodo: text => dispatch(actions.addTodo(text)),
  toggleTodo: (id, fromListId) => dispatch(actions.toggleTodo(id, fromListId))
});
 
// 写法 C：使用 bindActionCreators —— 与 B 等价，但更简洁
import { bindActionCreators } from 'redux';
const mapDispatchToProps = dispatch => 
  bindActionCreators({ addTodo: actions.addTodo, toggleTodo: actions.toggleTodo }, dispatch);

// actions
export const increment = id => ({ type: 'CART/INCREMENT', payload: id });
export const decrement = id => ({ type: 'CART/DECREMENT', payload: id });
export const checkout = () => ({ type: 'CART/CHECKOUT' });

// CartList.jsx —— 纯展示，无 connect，方便 Storybook 单测
import React from 'react';
 
function CartList({ items, total, onIncrement, onDecrement, onCheckout }) {
  return (
    <div>
      <h2>购物车 ({items.length})</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} × {item.qty}
            <button onClick={() => onIncrement(item.id)}>+</button>
            <button onClick={() => onDecrement(item.id)}>-</button>
          </li>
        ))}
      </ul>
      <div>总计：¥{total.toFixed(2)}</div>
      <button onClick={onCheckout}>结算</button>
    </div>
  );
}
 
export default CartList;

// CartContainer.js —— 负责“数据”与“行为”
import { connect } from 'react-redux';
import CartList from './CartList';
import * as cartActions from '../store/modules/cart';
 
const mapStateToProps = state => ({
  items: state.cart.items,
  total: state.cart.items.reduce((sum, i) => sum + i.price * i.qty, 0)
});
 
const mapDispatchToProps = {
  onIncrement: cartActions.increment,
  onDecrement: cartActions.decrement,
  onCheckout: cartActions.checkout
};
 
export default connect(mapStateToProps, mapDispatchToProps)(CartList);

// 修复示例：使用 useCallback 缓存回调（函数组件场景）
import { useCallback } from 'react';
 
const mapDispatchToProps = dispatch => ({
  // 每次父组件渲染都会生成新函数
  onAdd: text => dispatch(addTodo(text)),
  // 使用 useCallback 包裹，依赖稳定
  onAdd: useCallback(text => dispatch(addTodo(text)), [dispatch])
});

// 对比：Hooks 写法
function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();
  return <ul>{todos.map(t => <li key={t.id}>{t.text}</li>)}</ul>;
}
 
// connect 写法 —— 展示组件 100% 无依赖，复用性更强
export default connect(state => ({ todos: state.todos }))(TodoList);

import { ConnectedProps } from 'react-redux';
const connector = connect(mapState, mapDispatch);
type PropsFromRedux = ConnectedProps<typeof connector>;
interface Props extends PropsFromRedux { title: string; }