行动应该和店铺商谈吗？

Question

我正在使用带有通量架构的反应，但我遇到了一个问题。
我需要创建一个获取用户 ID 并获取用户的操作。代码如下：

var createAction = require('common/scripts/actions-helpers/create-action'),
    resource = require('common/scripts/resources/conversation');

module.exports = createAction(fetchAction);

function fetchAction(context, payload, success, failure) {
    resource.sync(context, payload.userId)
        .then(function(user) {
            context.dispatch('USER_FETCH', user);
            success();
        }, failure);
}

我想使用一个存储所有用户的存储，这样万一用户之前获取，该操作将不会执行后端调用。新操作应如下所示：

function getFetchedUser() {
    // <--------- HOW TO KNOW WHETHER USER FETCHED?
}

function fetchAction(context, payload, success, failure) {
    var user = getFetchedUser();
    if (user) {
        context.dispatch('USER_FETCH', user);
        success();
    } else {
        resource.sync(context, payload.userId)
            .then(function(user) {
                context.dispatch('USER_FETCH', user);
                success();
            }, failure);
    }
}

问题是我不想在操作中管理用户数据，所以我想到实现 getFetchedUser() 的唯一方法是检查用户存储。
这是一个好方法吗？
可以操作访问存储吗？

Answer 1

我也有类似的问题。我有一个 PhotosStore 保存用户的所有照片，服务器将其发送分页。

用户可以按最近、更多评论、更多查看对照片重新排序。 PhotosStore是否已经加载了所有页面，它可以自行重新排序，如果没有，需要调用服务器。

# actions
Actions.Photo = createActions(
  'sortBy', {'load': asyncResult: true}
)

# store
Store.Photos = Reflux.createStore(
  listenables: Actions.Photo

  onSortBy: (order) ->
    if @hasMorePages()
      Actions.Photo.load({order: order})
    else 
      # reorder and trigger

  onLoadCompleted: (data) ->
    # get data and trigger
)

# view
PhotoHeaderOrder = React.createClass
  mixins: [
    Reflux.connect(Store.Photos, 'model')
  ]

  onSortNew: -> Actions.Photo.sortBy('news')
  onSortCom: -> Actions.Photo.sortBy('comments')
  onSortVie: -> Actions.Photo.sortBy('views')

  render: ->
    # render code

Answer 2

常见的方法是从操作执行后端调用，然后在请求成功或失败时分派操作。通过这种方式，您可以使用操作填充您的商店。这意味着存储保持同步，并且可以在更改发生时发出更改。

var AppDispatcher = require(<Flux AppDispatcher>);
var UserActions = {

  fetchUser: function(payload) {
     fetchUserFromBackendApi(payload)
     .then(function (error, user) {
        if(error) {
           AppDispatcher.dispatch({
              actionType: "ERROR_CODE",
              error: error
          });
          return;
        }
       AppDispatcher.dispatch({
          actionType: "SUCCESSFUL_USER",
          user: user
       });
     }
  }
};

module.exports = UserActions;

然后您只需在商店中处理不同的操作类型并填充您的缓存。当缓存被填充时，您会发出一个更改事件，数据将被渲染。

这段代码不是最漂亮的，所以如果我误解或有任何问题，请大声疾呼。

所以回答最初的答案。操作组件不应与商店对话。它违背了 React 的关键概念之一，松散耦合。 使用 Flux 和 React 可以解决数据流问题，因为组件会在需要数据时触发操作。这些操作只是获取数据。