如何将 Flux 连接到 Sinatra API

Question

我正在将 React 用于 Web 应用程序，并且我已经开始学习 Flux。我喜欢单向数据流的概念，但我在理解它如何连接到 API 时遇到了一些问题。

我有一个用 Sinatra 编写的后端。我感到困惑的是数据如何从与组件的交互流向后端并再次返回？难道数据库和Flux所说的Store是两个不同的东西吗？

我的解读方式是这样的：

用户与 React 视图交互 =>

Action Creator 向后端发送数据 =>

后端用新的 data/success/error =>

响应 Action Creator

Action Creator 向 Dispatcher 发送动作和响应 =>

Dispatcher 看到动作并根据该动作调用回调，将其传递给后端响应 =>

Store 使用后端响应更新自身 =>

Store 将更改事件和数据发送到 React View =>

React 视图呈现 =>

（循环重复）

让我困惑的是商店的运作方式。我需要像我解释的那样的两家商店吗？或者后端应该是商店？

Answer 1

不，您 "just" 拥有一个商店 - 通常有助于考虑一个商店 - 一个组件关系。请注意，这应该与一粒盐一起服用，因为绝对有可能将多个商店连接到一个组件，反之亦然。

有几种方法可以实现后端通信，但我通常是这样的，通常使用Flux的Reflux implementation（因为我认为它更直截了当并遵循与 React 组件大致相同的概念）：

var SomeStore = Reflux.createStore({
    getInitialState: function () {
         //called when store is created

         var ApiPromise = MyApi.get('/my-resource-path/');
         ApiPromise.success(function (data) {
              this.data = data;
              this.triggerUpdateOfComponent(this.data);
         }.bind(this));
    }
});

使用正常的 Flux 实现，您将在 Dispatcher 中执行此操作，当应用程序开始加载时，您将通过 Action Creator 触发一个动作并告诉 Dispatcher 开始工作。

为了帮助了解商店，请将其视为处理与组件数据相关的逻辑和操作的容器。

如何将 Flux 连接到 Sinatra API

How to connect Flux to Sinatra API

javascript

architecture

sinatra

reactjs

reactjs-flux