如何從不同來源存儲編輯狀態

Question

有很多在線的待辦事項列表示例。那些特別是你可以編輯待辦事項的地方。在商店中存儲您正在編輯的內容似乎很明顯。

但現在圖像，如果你有兩個待辦事項列表在同一頁面上。假設這兩個待辦事項清單是相同的，也就是同一個實體。

如果您在一個待辦事項列表中編輯並顯示他們正在編輯。

在商店中表示源的最佳方式是什麼？你會如何將它發送給動作創建者？

Answer 1

根據您的評論，您希望兩個Todo組件都可以引用相同的數據，即如果您將Todo添加到您想要的其中一個列表中，則反之亦然。這意味着他們共享相同的數據，這實際上簡化了事情。簡化爲簡潔

class Store extends EventEmitter { 
    constructor() { 
    super() 
    this.data = [ 'a', 'b', 'c' ] 
    } 

    mutate(index, value) { 
    this.data[ index ] = value 
    this.onChange() 
    } 

    onChange() { 
    this.emit('change', this.data) 
    } 
} 

var store = new Store() 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = store.data 
    } 

    componentWillMount() { 
    store.on('change', data => this.setState(data)) 
    } 
} 

setTimeout(() => { 
    store.mutate(1, 100) 
}, 1000) 

類在本普通的例子的關鍵是，MyComponent實例偵聽改變底層數據存儲（你可以通過註冊回調，或採用實現相同的Flux風格的調度程序或許多其他方法）。當數據發生變化時，它會發出事件並將數據傳遞給任何用戶。在這種情況下，用戶將獲取數據並設置其狀態，從而觸發重新呈現以保持UI同步。

如果您真的想重複使用您的Todo組件，以便您的應用中可以有多個待辦事項列表，那麼您只需要有一種方法來區分組件需要的數據。實現此目的的一種非常簡單的方法是觸發一個從您的商店請求數據源的函數（而不是如示例中的硬編碼），任何更改數據的請求都需要識別正確的數據源，但UI通過傾聽和響應突變事件將保持一致。