從flummox行動/商店訪問react-router

Question

我希望能夠在Flummox動作中進行API調用，並根據響應進行不同的轉換。我可以通過路由器進入動作調用，但我正在尋找更好的方法。

UPDATE：

正確答案是低於，但我想添加一些細節這一點。

我在做一個同構的應用程序，它需要從api獲取數據，並且可能需要根據api響應重定向。無論我做什麼需要通過express.js應用程序並通過反應來工作。

我做了一個小的lib，做api調用並返回一些結果。我將它傳遞給一個對象（從服務器端快速查詢參數對象或爲反應端創建的類似對象）。這個lib發出請求，確定是否需要重定向，並返回錯誤，path（string），redirect（boolean）和data（json）。

表達式中，如果重定向布爾值爲真，我只是用當前查詢參數重定向到它。如果它是錯誤的，我通過更新商店的操作將數據傳遞給流量。然後，我使用react來渲染ToString，序列化商店，以便clint端可以引導，並將渲染後的頁面發送到客戶端。

在反應中，重定向布爾值並不重要，我從我的lib獲取響應，將數據傳遞給我的flux操作，並轉換到任何路徑。真的沒有重定向的概念。無論如何，只要走到路上。

希望這對某人有幫助。

Answer 1

在我的設置中，我有自己的路由器模塊，它只是包裝了我在啓動時創建的react-router的實例。這使得應用程序的任何部分都可以輕鬆地只需要該模塊並執行所需的任務。

但我會建議你不要在你的動作裏面給路由器打電話等副作用。操作應該關注於改變你的應用程序狀態，除此之外別無其他。應該可以從應用程序中的任何位置調用相同的操作，這需要執行操作所封裝的突變。

因此，如果您在某個操作中切換路由，則基本上將該操作綁定到該特定用例。我們舉個例子吧。您有待辦事項列表，底部有一個輸入框以添加新的待辦事項。對於這種用例，在保存待辦事項後切換路線可能很有用。也許你切換到最近的待辦事項或什麼。但是隨後出現了一個新的用例，您希望能夠在另一個工作流程中添加新的待辦事項，也許用戶正在計劃她的一週，並且應該能夠在不同的日子裏添加待辦事項。您需要添加待辦事項的相同操作，但您肯定不想切換路由，因爲用戶仍在計劃一週。

我沒有使用Flummox很多，但從我的理解你的Flux對象返回當你觸發一個動作時返回的動作。因此，不要將行爲改變放在行爲中，而是確保從行爲中返回響應，並讓組件決定是否應該更改路由。像這樣：

// todo-action.js 
class TodoActions extends Actions { 
    createMessage(todo) { 
    return TodoStore.saveToServer(todo); 
    } 
} 

// todo-list.js 
const TodoList extends React.Component { 
    render() { 
    ... 
    } 
    addTodo(todo) { 
    this.props.flux.addTodo(todo).then(response => { 
     if (response.some.prop === someValue) { 
     this.props.router.transitionTo(...); 
     } 
    }); 
    } 
} 

這樣，行動仍然很好地脫離了路線變化。如果您想在多個位置執行路由切換，可以將其封裝在Flux類的addTodoAndSwitchRoute方法中。