如何使用 Redux 在 Meteor App 中加载数据？答案

【问题标题】：How to load data in Meteor App using Redux?如何使用 Redux 在 Meteor App 中加载数据？
【发布时间】：2017-12-01 01:36:14
【问题描述】：

简介：

所以我在 Redux 上苦苦挣扎了很久。我想我现在确实理解了这个概念。本质上（并且相当简化）：

有一个 Store 保存您所有的应用程序相关状态，
用户与应用的交互可以触发操作描述性标题和一些数据负载
Reducer 使用 Store 中的当前状态和 Actions 有效负载将更新后的状态放入存储中（在旧状态之上）

现在这很好，因为可以将组件（甚至在反应树的深处）与状态连接起来，并将状态用作单一的事实来源（即始终知道用户是否登录）。

在将 Redux 与 Meteor 结合使用时，我遇到了这个问题，我仍然不清楚为什么要在 Meteor 应用程序的 Redux 存储中放入哪些信息以及要放入哪些信息。

示例：

假设我们有一个帖子集合。通常我们只会通过 Minimongo 获取结果并将结果显示给用户。现在假设我们想让我们的 Redux 存储作为一个单一的事实来源来保存所有数据。基本上必须将 minimongo 与 Redux 存储同步。大概有人会在 componentDidMount 上调度一个动作来将数据加载到存储中。

store.dispatch({
  type: 'GET_POSTS',
  posts: Posts.find().fetch(),
});

这将被简化为：

const postReducer = (state = [], action) => {
  switch (action.type) {
    case 'GET_POSTS':
      return action.posts;
    default:
      return state;
  }
};

现在要让这个商店保持最新状态，它必须与 Posts 集合同步，大概是这样的（尽管我不完全确定我必须在我的代码中的哪个位置放置该跟踪器）：

Tracker.autorun(() => {
  store.dispatch({
    type: 'GET_POSTS',
    posts: Posts.find().fetch(),
  });
});

现在我的主要问题是：如何避免 Redux 存储的大量膨胀，因为我理解的方式是每当有人提交新帖子时，我们将拥有当前状态 + 新状态 (这本质上是当前状态+新帖子）。如果您有几个人来回发帖，这可能会很快爆炸，或者即使您的初始帖子数量很大。

【问题讨论】：

标签： reactjs meteor redux react-redux

【解决方案1】：

感谢您提出这个问题！上周我在一次培训中学习了 React + Redux，我渴望将它添加到 Meteor。男孩，从那以后我是否发现自己陷入了困境！

我知道您已经熟悉 Redux。对于那些没有的人，你一定要检查these videos。

正如我written earlier，

我已经意识到两个问题。这些问题当您让所有数据（包括集合）流过 Redux 商店：

您放弃了 Meteor 的反应性（对于普通的 Meteor，当 MongoDB 更新时，视图中显示的数据也会更新）。解决方案：我们可以在服务器端编写额外的 Redux 操作和缩减程序。

您在 Meteor 乐观 UI 上松懈了（使用原版 Meteor，当您添加新的小部件时，客户端已经尝试预测甚至在服务器响应之前它应该是什么样子）。在里面此处的示例，在调用 Redux 操作（例如添加 Widget）时，我们本质上是等待 Meteor 方法将 Widget 插入在移动到将更新 Redux 的 Reducer 之前收集存储，谁的状态反过来更新我们的视图。（当然，这一切发生得如此之快以至于你不会注意到它，但你可能会注意到如果您在慢速服务器上运行它或者当您有移动设备时应用）。解决方案：我们可以在动作中编写额外的逻辑立即使用新的 Widget 更新 Store，如果它变成我们没有被授权调用 Meteor 方法，我们仍然可以使用， Action内，Promise的.catch调整Store （删除我们已经添加的 Widget）。

基本上，通过将 Redux 引入我们的 Meteor-React 解决方案，我们错过了 Meteor 的两个很棒的功能。两者都可以使用自写的逻辑重建，但坦率地说，这样做似乎很可惜所以。

我目前的看法：

对于不需要管理大量状态的相对简单的应用程序，不要将 Redux 引入您的 React-Meteor 堆栈。您会发现自己编写了更多额外的代码（即用于乐观 UI 和服务器端更改）。 Meteor 通常首先处理的代码。
对于具有大量状态管理的更复杂的应用程序：Redux 似乎是目前为 React 应用程序处理此问题的最佳方法之一。在这种情况下，将 Meteor 视为服务器可能是值得的。然后，对 MongoDB 的调用应该总是通过 Meteor 方法，而这些方法又是从 Redux 操作中调用的。 Meteor 方法绝对不应该在 Redux reducer 中调用，因为那将是一个side effect。 此时您可能想知道仍然使用 Meteor 有什么优势 - 这是一个非常好的问题。

除此之外，我一直在考虑一种试图将两个世界的精华结合起来的架构。这样的架构仍将使用 Meteor 的订阅/发布功能（因此您可以将乐观的 UI 和服务器端更改发送到客户端），并将使用 Redux Store 进行特定于 UI 的更改（想想过滤按钮）。

一个更具体的例子：您通过 Meteor 在您的应用程序中发布/订阅来获取您的待办事项。但是在你真正将它们渲染到你的组件之前，你需要在中间添加一个过滤器函数。这个过滤器函数依赖于 Redux Store 对过滤器的描述。这又是由您按下的一些按钮定义的，这些按钮通过 Redux 操作和 reducer 传递到 Redux Store。

【讨论】：

我想我同意你更具体的例子。你在那里描述的对我来说很有意义，并且是我现在的想法到达的地方。你能把它写下来（伪代码很好）吗？我看到它的方式是您将创建一个容器（即来自“流星/反应流星数据”的createContainer；），在该容器中您将订阅您的相关订阅，然后根据您获得的道具过滤数据你的 redux 商店，对吧？
正要在评论中发布它，但首先我想测试这种方法。在此期间我已经这样做了，但是我看到已经提供了一个很好的答案！对于那些正在寻找更多关于如何不让 Redux Store 膨胀的解释的人来说，添加这可能是件好事，基本上是将 UI 状态和域状态分开作为指导原则！如何在本系列中讲解（第 5 篇文章未在行中链接，但您可以谷歌它）：medium.com/front-end-developers/…
但是现在让我想知道如何管理用户信息，以及是否将其放入 Store 或简单地将其作为道具传递给组件：stackoverflow.com/questions/44852424/…

【解决方案2】：

将解决方案从问题移到答案：还要解决上面的主要问题。（在大多数情况下）不应该将来自 Mongo 的数据放入存储中，而应该依赖原生的流星功能。示例见下文。

解决方案： 未经测试，但应该可以工作。下面展示了一种在基于 Redux 状态的 Meteor App 中从 Mongo 获取数据的方法。

更新： 同时测试了类似的东西。切换了第 2 步和第 3 步。这是必要的，因为否则无法访问 createContainer 中的过滤器。（因为在组合组件的时候有点“从外部组件到内部组件的逻辑”）

1.设置 PostsList（显示帖子）：

class PostsList extends Component {
    render () {
        return (this.props.posts.map((post,i) => {return (<div key={i}>post.header</div>)})
    }
}

2。将组件连接到 Meteor：

const PostsListContainer = createContainer((props) => {
    let posts = Meteor.subscribe('getPosts', props.filter);
    return {
        posts
    }
}, PostsList)

3.将组件连接到 Redux：

const mapStateToProps = state => {return{filter: state.filter}}

const ConnectedComponent = connect(mapStateToProps,)(PostsListContainer)

【讨论】：