如何實施行動隊列通量應用

Question

據陳靜（臉譜），它們正在實施的upcomming繼電器框架類似的事情：

React.js Conf 2015 - Flux Panel

我，如果有人只是好奇將這樣的東西應用到流量架構中，然後心理模型會變成什麼樣子？據我所知，除了你的「真相之源」商店之外，你還會創建一個額外的商店，以保持樂觀的更新狀態。然後，根據來自服務器的反饋，您將以任何方式將其從樂觀商店中提取出來，然後將其合併到「真實」商店或跳過合併並重新呈現視圖。該視圖顯示「真實源」商店和樂觀商店中的內容，完全是這個順序。

如果任何人已經實現了這樣的事情，如果你能分享你的經驗和心理模型，這將非常棒。

Answer 1

我一直在這裏尋找答案。沒有運氣，所以我試圖弄清楚自己。

所以，如果你聽到Jing在這個細分市場上說的話，我認爲你不會維護一個獨立的商店，並且處於變異狀態。她說要堅持樂觀的動作。她還提到，消除這些突變是一種痛苦，而且它們是。 跟蹤變異狀態是敵人。

她描述的是緩存和驗證用戶正在採取的操作，並且而不是這些操作如何變化狀態。

---

因此，讓我們創建待辦事項並將其保存到服務器異步。目標是按照發生的順序保存這些操作。每次視圖都要求提供todos時，請立即應用這些突變。該視圖不會知道髒模型之間的區別或保存模型，因爲它不需要。但是真相源頭唯一改變的時機是服務器響應成功或失敗。

// ........................ 
// === Add Todo Action === 
// ^^^^^^^^^^^^^^^^^^^^^^^^ 
var addTodoAction = function(todo) { 
    var actionId = guid(); 

    Dispatcher.dispatch({ 
     actionType: 'ADD_TODO', 
     actionId: actionId, 
     payload: todo 
    }); 

    // Async Operation (save to server) 
    // Callbacks for success and error 
    API.addTodo(todo, function(res) { 
     Dispatcher.dispatch({ 
      actionType: 'ADD_TODO_SUCCESS', 
      actionId: actionId, // Identify the same optimistic action 
      payload: res.todo 
     }); 
    }, function(err) { 
     Dispatcher.dispatch({ 
      actionType: 'ADD_TODO_FAILURE', 
      actionId: actionId, // Identify the same optimistic action 
      error: err 
     }); 
    }); 
}; 





// ................................ 
// === Private Todos Collection === 
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
var _todos = new Immutable.OrderedMap(); 

// Add todo to collection 
var addTodo = function(todo) { 
    _todos = _todos.set(todo.id, todo); 
}; 


// ........................................ 
// === Collection of Optimistic Updates === 
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
var _actions = new Immutable.OrderedMap(); // Ordered Immutable Map to preserve sequential order of mutations 

// Add action to queue 
var addAction = function(e) { 
    _actions = _actions.set(e.actionId, e); 
}; 

// Remove action 
var removeAction = function(e) { 
    _actions = _actions.delete(e.actionId); 
}; 


// ........................................................ 
// === Create Mutation of Source of Truth for the View === 
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
var getOptimisticTodos = function() { 

    // Loop through optimistic mutations in order, and apply them to a copy of the state. 
    return _.reduce(_actions.toArray(), function(todos, action) { 
     switch (action.actionType) { 
      case 'ADD_TODO': 
       todos = todos.set(action.payload.id, action.payload); 
       break; 
      default: 
     } 
     return todos; 
    }, _todos.asImmutable()); 

}; 



// .......................................... 
// === Create a Public API for Todo Store === 
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
var TodoStore = _.extend({}, Events, { 
    getTodos: function() { 
     return getOptimisticTodos(); 
    } 
}); 

// ...................................... 
// === Register actions we care about === 
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

/* Example Dispatch 
* 
* { 
*  actionId: 12345, 
*  actionType: 'ADD_TODO_SUCCESS', 
*  payload: { 
*   id: 12345, 
*   text: 'Example Todo' 
*  } 
*   
* } 
* 
*/ 

TodoStore.dispatchToken = Dispatcher.register(function(e){ 
    switch (e.actionType) { 
     case 'ADD_TODO': 
      addAction(e); // add optimistic action to queue 
      TodoStore.trigger('change'); // let views know about change 
      break; 
     case 'ADD_TODO_SUCCESS': 
      removeAction(e); // remove optimistic action because it succeeded 
      addTodo(e.payload); // add todo to source of truth 
      TodoStore.trigger('change'); // let views know about change 
      break; 
     case 'ADD_TODO_FAILURE': 
      removeAction(e); // remove optimistic action because it failed 
      console.log(e.error); // handle error in store or elswhere 
      TodoStore.trigger('change'); // let views know about change 
      break; 
     default: 
    } 
});