Redux 是一个 JavaScript 应用程序状态管理器，reduxify 是一个用于将 React 组件连接到 Redux Store 的高阶函数。本文将详细介绍如何使用 npm 包 reduxify。
安装
使用 npm 安装 reduxify：
npm install reduxify
或使用 yarn 安装：
yarn add reduxify
使用
reduxify 接受三个参数并返回一个高阶函数，这个高阶函数接受一个组件并返回一个连接了 Redux Store 的新组件。
reduxify 函数的三个参数分别为：
- mapStateToProps(state)：一个函数，返回一个包含组件需要的 state 的对象
- mapDispatchToProps(dispatch)：一个函数，返回一个包含组件需要的 dispatch 方法的对象
- mergeProps(state, dispatch, ownProps)：一个函数，返回一个对象，将 mapStateToProps 和 mapDispatchToProps 返回的对象以及组件的 ownProps 合并成一个对象
先看一个简单的示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ -------- ---- ----------- ----- ------- ------- --------------- - -------- - ------ - ----- ------------------------------- ------- ----------------------------------------- ------- ----------------------------------------- ------ -- - - ----- --------------- - ----- -- -- -------- -------------- --- ----- ------------------ - -------- -- -- ---------- -- -- ---------- ----- ----------- --- ---------- -- -- ---------- ----- ----------- --- --- ------ ------- ------------------------- -----------------------------展开代码
上面的示例中，我们定义了一个 Counter 组件，并使用 reduxify 高阶函数将组件连接到 Redux Store。
mapStateToProps 函数接受一个 state 参数，并返回一个包含组件需要的 state 的对象。在上面的示例中，我们返回了一个包含 counter 的对象，将 counter 属性映射到了组件的 props 上。
mapDispatchToProps 函数接受一个 dispatch 参数，并返回一个包含组件需要的 dispatch 方法的对象。在上面的示例中，我们返回了一个包含 increment 和 decrement 方法的对象，将这两个方法映射到了组件的 props 上。
mergeProps 函数接受三个参数：state，dispatch 和 ownProps。默认情况下，reduxify 会将 mapStateToProps 返回的对象、mapDispatchToProps 返回的对象以及组件自身的 props 对象合并成一个新的 props 对象。如果需要自定义 props，可以传入一个 mergeProps 函数。在上面的示例中没有传入 mergeProps 函数，使用了默认的合并方式。
总结
使用 reduxify 可以方便地将 React 组件连接到 Redux Store。本文介绍了 reduxify 的使用方法，并给出了一个简单的示例。熟练掌握 reduxify 可以提高开发效率，减少代码量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d25
