React-Redux 深度解析：mapStateToProps 数据提取指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00310/article/details/148361819

React-Redux 深度解析：mapStateToProps 数据提取指南

react-redux reduxjs/react-redux: React-Redux 是一个用于 React 的 Redux 绑定库，可以用于构建 React 应用程序和组件，支持多种 Redux 功能和工具，如 Redux，Redux-Thunk，Redux-DevTools 等。项目地址: https://gitcode.com/gh_mirrors/re/react-redux

什么是 mapStateToProps

在 React-Redux 生态中，mapStateToProps 是 connect 高阶组件的第一个参数，用于从 Redux store 中选择组件需要的数据片段。这个函数通常简称为 mapState，是连接 React 组件与 Redux 存储的关键桥梁。

核心特性

响应式更新：每当 Redux store 状态发生变化时，mapStateToProps 都会自动执行
数据筛选：接收完整的 store 状态，返回组件需要的特定数据对象
性能优化：React-Redux 会智能判断返回数据是否变化，决定是否触发重新渲染

函数定义规范

mapStateToProps 必须定义为纯函数，接收以下参数：

function mapStateToProps(state, ownProps?) {
  // 返回组件需要的props对象
}

参数详解

state：完整的 Redux store 状态树（等同于 store.getState() 的返回值）
ownProps（可选）：组件自身的 props 对象

返回值要求

必须返回一个普通对象，其中每个属性都会成为连接组件的 prop。React-Redux 会对返回对象进行浅比较，决定是否需要重新渲染组件。

实际应用示例

基础用法

function mapStateToProps(state) {
  return {
    todos: state.todos,
    filter: state.visibilityFilter
  };
}

结合组件props

function mapStateToProps(state, ownProps) {
  return {
    todo: state.todos.find(todo => todo.id === ownProps.id)
  };
}

性能优化策略

1. 使用选择器函数

选择器（Selector）是提取和转换状态的函数，推荐使用 reselect 等库创建记忆化选择器：

import { createSelector } from 'reselect';

const getVisibleTodos = createSelector(
  [state => state.todos, state => state.visibilityFilter],
  (todos, filter) => {
    switch (filter) {
      case 'SHOW_ALL':
        return todos;
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed);
    }
  }
);

function mapStateToProps(state) {
  return {
    todos: getVisibleTodos(state)
  };
}