GenRx 是一个针对 React 和 Redux 应用程序的 npm 包，可以轻易地将 Redux Store 中的数据映射到 React 组件的 Props 中。在此篇文章中，我们将探讨如何使用 GenRx。
安装和配置
要安装 GenRx，您需要使用 npm。在项目目录下，运行以下命令：
npm install genrx --save
在您的 React 应用程序中，您需要创建一个名为 store.js 的 Redux Store 文件。在这个文件中，您需要导入 createStore 方法，并将其作为默认导出。您还需要将 Reducer 作为第一个参数传递给 createStore 方法。例如：
import { createStore } from 'redux';
import rootReducer from './reducers';
export default createStore(rootReducer);现在，您需要创建一个名为 genrx.js 的文件。在 genrx.js 中，您需要导入 connect 方法和 store 对象。connect 方法用于将 Redux Store 中的数据映射到 React 组件的 Props 中。store 对象是您在 store.js 中创建的 Redux Store。例如：
import { connect } from 'genrx';
import store from './store';将数据映射到组件属性
现在，您可以开始将 Redux Store 中的数据映射到 React 组件的 Props 中。首先，您需要定义一个名为 mapStateToProps 的方法。在这个方法中，您将指定要从 Redux Store 中获取的数据，并将它们映射到您的组件的 Props 中。例如：
const mapStateToProps = (state) => ({
count: state.count,
user: state.user,
});在上面的示例中，我们将 count 和 user 属性从 Redux Store 映射到组件的 Props 中。
接下来，您可以使用 connect 方法将 mapStateToProps 方法与您的组件进行连接。例如：
-- -------------------- ---- -------
------ - ------- - ---- --------
----- --------------- - ------- -- --
------ ------------
----- -----------
---
----- ----------- ------- --------------- -
-------- -
------ -
-----
--------- ----------------------
-------- --------------------------
------
--
-
-
------ ------- --------------------------------------在上面的示例中，我们将 mapStateToProps 方法与 MyComponent 连接起来，并将组件作为参数传递给 connect 方法。现在，您可以在组件的 Props 中访问 count 和 user 属性。
使用 Action Creator 更新 Store
现在，当您在组件中访问 Redux Store 中的数据时，您可能希望能够更新 Store 中的值。要实现这一点，您需要使用 Action Creator。Action Creator 是一个函数，使用它可以创建一个将被发送到 Store 的 Action 对象。在 Redux 中，Action 对象必须具备一个类型属性，以便 Store 中的 Reducer 可以识别它，并执行相应的操作。
在这个例子中，我们将创建一个名为 incrementCount 的 Action Creator，用于将 count 属性增加 1。在 store.js 文件中添加以下代码：
export const incrementCount = () => ({
type: 'INCREMENT_COUNT',
});在上面的示例中，我们定义了一个名为 INCREMENT_COUNT 的操作类型，这个类型将被 Store 的 Reducer 识别并执行相应的操作。
现在，我们还需要更新 reducers.js 文件中对 count 属性的处理。例如：
-- -------------------- ---- -------
----- ------------ - -
------ --
----- -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
--
------ ------- ------------在上面的示例中，我们更新了 reducers.js 文件中对 INCREMENT_COUNT 操作类型的处理。现在，当我们调用 incrementCount 函数时，Store 中的 count 属性将增加 1。
最后，您需要使用 dispatch 方法来触发 Action Creator。例如，在组件中添加以下代码：
-- -------------------- ---- -------
------ - -------------- - ---- ------------
----- ----------- ------- --------------- -
----------- - -- -- -
--------------------------------------
--
-------- -
------ -
-----
--------- ----------------------
-------- --------------------------
------- ------------------------------------ --------------
------
--
-
-在上面的示例中，我们将 incrementCount 方法传递给 dispatch 方法，该方法将 Action 对象发送到 Store 中。现在，当用户单击按钮时，incrementCount 方法将被调用，并向 Store 发送 Action 对象。
结论
在本文中，我们介绍了如何使用 GenRx npm 包将 Redux Store 中的数据映射到 React 组件的 Props 中，并且还介绍了如何使用 Action Creator 更新 Store。希望这篇文章对您有所帮助，感谢您的阅读！
示例代码
您可以在以下 GitHub 存储库中找到此示例代码：
https://github.com/example/genrx-tutorial
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bf981e8991b448d99a9