如何同步Redux存儲中的同一個對象？

Question

我正在使用react + redux來實現網站。 例如，有兩個頂部反應的組分，儀表板和用戶，信息中心會顯示最新的問題，用戶顯示的用戶配置文件和相關的問題，這是一個單頁的網站，我會設計的狀態是這樣的：

<pre><code> 

{ 
    'dashboard': { 
     'questions': [...] 
    }, 
    'users': [ 
     { 
      'id': 1, 
      'nickname': 'blabla', 
      'questions': [...], 
     } 
    ] 
} 

</code></pre> 

如果用戶更改用戶組件上的問題狀態（例如，刪除或關閉用戶組件），那麼儀表板和用戶頁面包含相同的問題的可能性很大，如何立即反映儀表板組件上的更改？

Answer 1

最佳做法是規範您的Redux狀態結構並避免重複的數據。一種更好的方式來構建你的店會

{ 
    questions: { 
     1: { 
     id: 1, 
     question: '...' 
     }, 
     ... 
    }, 
    users: { 
     1: { 
     id: 1, 
     name: '...', 
     questions: [1, 2, 3] 
     }, 
     ... 
    }, 
    dashboard: { 
     questions: [1, 2, 5, ...] 
    } 
} 

使用選擇建立的問題，這些陣列爲您的組件。

// selector 
const getUserQuestions = (state, userId) => { 
    const { 
     questions, 
     user: { 
      [userId]: { questions: userQuestions = [] } 
     } 
    } = state; 

    return userQuestions.map(id => questions[id]); 
} 

這是你的mapStateToProps會是什麼樣子在User頁

const mapStateToProps = (state, ownProps) => { 
    return { 
     questions: getUserQuestions(state, ownProps.userId) 
    } 
} 

Normalizr可以幫助你恢復正常的狀態，結構和Reselect可以幫助您優化選擇。