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

常见的方法是从操作执行后端调用，然后在请求成功或失败时调度操作。这样您就可以使用操作填充商店。这意味着商店保持同步，并且只能在它们出现时发出更改。

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可以解决数据流问题，因为组件会在需要数据时触发操作。这些操作只是获取数据。

Answer 2

我也有类似的问题。我有一个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

应该与商店谈谈吗？

2 个答案: