Redux中mapStateToProps与mapDispatchToProps的作用及示例详解

作为常年跟Redux打交道的开发者，我来给你掰扯清楚这俩函数到底是干啥的，以及实际项目里怎么用——毕竟刚接触Redux的时候，我也对着这俩函数懵了好一阵😅。

一、mapStateToProps：把全局状态"搬"到组件props里 #

核心作用 #

说白了，mapStateToProps就是Redux store和React组件之间的"数据搬运工"：它接收Redux store里的全局状态（state），以及组件自身的props（ownProps，可选），返回一个对象——这个对象里的每一组键值对，都会变成组件可以直接使用的props。

简单说就是：组件需要用全局状态里的某部分数据？让mapStateToProps帮你把它"映射"成组件自己的props，不用再通过父组件一层一层往下传。

实际示例：过滤待办列表 #

比如我们有个TodoList组件，需要根据父组件传来的filter参数（比如"completed"已完成、"active"未完成），从Redux store的todos数组里过滤出对应的数据：

import { connect } from 'react-redux';

// 定义mapStateToProps函数
const mapStateToProps = (state, ownProps) => {
  // state是Redux store的全局状态，这里假设state.todos是所有待办项的数组
  // ownProps是组件自身的props，这里拿到父组件传的filter参数
  const filteredTodos = state.todos.filter(todo => {
    if (ownProps.filter === 'completed') return todo.completed;
    if (ownProps.filter === 'active') return !todo.completed;
    return true; // 默认显示所有待办
  });

  // 返回的对象会变成组件的props
  return {
    todos: filteredTodos
  };
};

// 待办列表组件
const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

// 用connect把组件和Redux store连接起来
export default connect(mapStateToProps)(TodoList);

适用场景 #

当组件需要依赖全局共享状态的时候就用它：比如用户登录信息、全局主题配置、跨页面的列表数据（像上面的待办项），不用再搞复杂的props链，直接从store取就行。

二、mapDispatchToProps：把状态变更"封装"成组件方法 #

核心作用 #

如果说mapStateToProps是"读"状态，那mapDispatchToProps就是"写"状态的工具：它把Redux的dispatch方法（用来触发action、修改store状态）包装成组件的props方法，让组件不用直接调用dispatch，而是通过调用props里的方法就能触发状态变更。

它有两种写法：对象形式（简单场景用）和函数形式（需要自定义逻辑时用）。

实际示例1：对象形式（简单触发action） #

比如我们有个TodoForm组件，需要添加新的待办项，直接把action创建函数放进mapDispatchToProps对象里，connect会自动帮你包装成带dispatch的方法：

import { connect } from 'react-redux';
import { useState } from 'react';
// 假设我们已经定义了addTodo这个action创建函数
import { addTodo } from './todoActions';

// 直接传对象，connect会自动处理dispatch逻辑
const mapDispatchToProps = {
  addTodo // 键名就是组件props里的方法名，值是action创建函数
};

const TodoForm = ({ addTodo }) => {
  const [inputText, setInputText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputText.trim()) {
      // 直接调用props里的addTodo，不用手动写dispatch(addTodo(inputText))
      addTodo(inputText);
      setInputText('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="输入待办内容..."
      />
      <button type="submit">添加待办</button>
    </form>
  );
};

// 第一个参数传null，因为这个组件不需要读全局状态
export default connect(null, mapDispatchToProps)(TodoForm);

实际示例2：函数形式（自定义触发逻辑） #

如果需要用到组件自身的props来触发action，就用函数形式。比如TodoItem组件，需要根据自己的todoId来切换待办项的完成状态：

import { connect } from 'react-redux';
import { toggleTodo } from './todoActions';

// 函数形式接收dispatch和ownProps两个参数
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // 自定义一个toggle方法，触发时用ownProps里的todoId来创建action
    toggleTodo: () => dispatch(toggleTodo(ownProps.todoId))
  };
};

const TodoItem = ({ todo, toggleTodo }) => {
  return (
    <li 
      onClick={toggleTodo}
      style={{ textDecoration: todo.completed ? 'line-through' : 'none', cursor: 'pointer' }}
    >
      {todo.text}
    </li>
  );
};

export default connect(null, mapDispatchToProps)(TodoItem);

适用场景 #

当组件需要触发全局状态变更的时候用它：比如提交表单修改数据、点击按钮切换状态、发送请求更新全局数据等。把dispatch逻辑封装起来，组件只需要关注"调用方法"，不用关心Redux的底层机制，耦合度更低。

总结一下 #

这俩函数都是Redux connect方法的核心参数：

• mapStateToProps：负责从store读数据，把全局状态映射成组件props
• mapDispatchToProps：负责向store写数据，把action触发逻辑封装成组件方法

配合使用的话，React组件就能无缝对接Redux store，不用再手动传递大量props，状态管理也会清晰很多。

内容的提问来源于stack exchange，提问作者user6399242