前言
在使用 Meteor 开发项目时，我们可能会采用一些前端框架来协助我们完成开发工作，比如 React。而 Redux 是一种非常流行的状态管理工具，它可以使得应用的状态管理变得非常简单且易维护。如果我们希望在 Meteor 项目中使用 Redux，那么我们可以使用一个叫做 redux-meteor 的 npm 包来完成。
在本文中，我们将会讨论如何使用 redux-meteor 来在 Meteor 中使用 Redux。
安装
使用以下命令即可安装 redux-meteor：
npm install --save redux-meteor
使用
配置 Store
首先，我们需要创建一个 Redux Store。在这个例子中，我们将会使用 combineReducers 函数来创建一个包含两个 reducer 的 Store：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------- - ---- --------------- ----- -------- - - ---- ------ - --- -- ------ ---- ------ - --- -- ------ -- ----- ----------- - ----------------- ------------ ------- -------------- --- ----- ----- - -------------------------
现在我们已经创建好了 Redux Store，并在其中加入了 meteorReducer。
集成 DDP
接下来，我们需要将 DDP 连接到该 Store。我们可以通过以下代码实现：
-- -------------------- ---- -------
------ - ------- - ---- -----------------
------ - ------ - ---- ----------------
------ - ------- - ---- ---------------
----- --------- - ------------
----------------- -- -
----- ------ - ---------------------------
----- ------------- - ----------------------------------- - ------ ---
------------------ -- -
-- ---------------------------------- -
-------------- -------------- -----------
-
---
---上述代码中：
- 我们使用
io函数创建了一个 websocket 实例，并将其作为参数传递给DDP.connect函数 - 我们创建了一个追踪器，该追踪器会不断检查
ddpConnection.status().connected的值 - 在
ddpConnection连接成功时，我们会调用connect函数，并将 Store、DDP 连接以及一个随机生成的 Meteor ID 作为参数传递给它
合并 Meteor 数据
现在我们已经成功将 DDP 连接到 Store 之中，但是我们还需要将 Meteor 的数据添加到 Store 之中。有一种方法是在每个 Component 中使用 createContainer，但是这种方式比较麻烦且容易导致性能问题。因此，我们可以使用 createCollectionContainer 函数，它会自动将 Meteor 数据合并到 Store 之中。
首先，我们需要定义一个 Collection：
import { Mongo } from 'meteor/mongo';
export const Foos = new Mongo.Collection('foos');接下来，我们可以使用 createCollectionContainer 函数将 Meteor 数据合并到 Store 之中：
-- -------------------- ---- ------- ------ - ------------------------- - ---- --------------- ------ - ---- - ---- ---------------- ----- ----------------- - -- ----------- ----- ----- ------- ------- ----------- --- ----- ------------- - -------------------------------------------------------
在上述代码中，我们将 FoosList 组件传递给了 createCollectionContainer 函数，该函数返回一个新的 Component：connectedFoos。该 Component 中的所有 props 都将会从 Store 中获取，包括 Meteor 数据。此外，我们还需要定义一个包含有 Collection 配置的数组。在上述代码中，我们只有一个 Collection 配置，对应的是 Foos。
最后，我们需要将 connectedFoos 渲染到 DOM 当中：
-- -------------------- ---- -------
----------------- -- -
----------------
--------- --------------
------- -------------------------
---------- --
---------
------------
----------------------------------
--
---接下来，我们就可以通过 Store 获取到 Meteor 数据了，比如：
import { Foos } from './collections';
export const selectAllFoos = ({ foos }) => (
foos.items.map(id => Foos.findOne(id))
);总结
在本文中，我们讨论了如何使用 redux-meteor 在 Meteor 项目当中集成 Redux。我们首先介绍了如何创建一个包含 meteorReducer 的 Redux Store，并实现了 DDP 连接。然后，我们使用 createCollectionContainer 函数将 Meteor 数据合并到 Store 之中。最后，我们演示了如何从 Store 中获取 Meteor 数据。
如果你在使用 Meteor 项目开发，在使用 React 和 Redux 技术栈，那么 redux-meteor 包会是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b21