如果你正在学习 React 和 Redux，那么你一定已经知道 Redux 是一个很有用的状态管理工具，用于管理 React 应用程序中的状态。然而，在实际应用中，你可能会遇到 Redux 的某些限制，比如 Redux 只能作用于全局状态，无法精确控制每个组件的状态。为了解决这个问题，需要使用 React-Redux 来连接组件和 Redux。
React-Redux 简介
React-Redux 是 Redux 官方提供的一种将 React 和 Redux 结合起来使用的库。它提供了一种将 Redux store 中的状态映射到 React 组件属性（props）中的方式，并在需要时将 React 组件中的操作映射到相应的 Redux action 中的方式。
React-Redux 提供了两个核心 API： Provider 和 connect。
- Provider： 将 Redux store 作为属性传递给 React 组件层级中的所有组件。
- connect: 连接 React 组件与 Redux store，它是使用 React 高阶组件（Higher-Order Components）实现的。
高级教程
React-Redux 简介篇已经比较基础了，下面我们来深入学习一下 React-Redux 的高级用法。
mapStateToProps
mapStateToProps 是 connect 方法的第一个参数，它是一个函数，用于将 Redux store 中的状态映射到 React 组件的属性（props）中。 connect 方法会将该函数的返回值与 React 组件进行连接。
const mapStateToProps = state => ({
todos: state.todos
});
export default connect(
mapStateToProps
)(TodoList);上面的示例中，我们定义了一个 mapStateToProps 函数，将 state.todos 映射到 TodoList 组件的 todos 属性中。
mapDispatchToProps
mapDispatchToProps 是 connect 方法的第二个参数，它是一个函数，用于将 React 组件中的操作映射到相应的 Redux action 中。
const mapDispatchToProps = dispatch => ({
addTodo: text => dispatch(addTodo(text))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(AddTodo);上面的示例中，我们定义了一个 mapDispatchToProps 函数，将 AddTodo 组件的 addTodo 方法映射到 dispatch(addTodo(text)) 中。
mergeProps
mergeProps 是 connect 方法的第三个参数，它是一个函数，用于将 mapStateToProps 返回的属性、mapDispatchToProps 返回的属性以及父组件传递的属性进行合并。
-- -------------------- ---- ------- ----- ---------- - ------------ -------------- --------- -- -- -------------- ----------------- ------------ --------- -- -- -------------------------- ------ --- ------ ------- -------- ---------------- ------------------- ---------- ------------
上面的示例中，我们定义了一个 mergeProps 函数，其中合并了 mapStateToProps 返回的属性、mapDispatchToProps 返回的属性以及父组件传递的属性，并添加了一个新属性 onCreate。
ownProps
ownProps 表示组件自身的 props，它是 mergeProps 函数的第三个参数。你可以使用它来访问任何组件传递的属性。下面是一个使用 ownProps 的示例：
const mapStateToProps = (state, ownProps) => ({
todos: state.todos[ownProps.filter]
});
export default connect(
mapStateToProps
)(TodoList);上面的示例中，我们使用 ownProps.filter 来过滤 state.todos。
withExtraProp
有时候，你可能需要为所有连接的组件添加一些额外的属性。这时候可以使用 withExtraProp 函数。
-- -------------------- ---- -------
----- ------------- - ---------- ---------- -- -
------ -------- ------------------ -
------ -------- ------- -
----- -------- - -
----------- ----------
--------
--
------ ----------------- ------------- ---
--
--
--
------ ------- ------------------------- ------ ------------------上面的示例中，我们定义了一个 withExtraProp 函数，用于为 TodoList 组件添加额外的属性。
总结
React-Redux 为我们提供了一种将 Redux store 中的状态映射到 React 组件属性中的方式，并在需要时将组件中的操作映射到相应的 Redux action 中的方式。通过 connect 方法，我们可以将 React 组件与 Redux store 进行连接，并实现高级的功能，比如 mapStateToProps、mapDispatchToProps、mergeProps、ownProps 和 withExtraProp 等。掌握 React-Redux 的高级用法，可以帮助我们更好地管理应用程序中的状态。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64cb8c895ad90b6d042112cb