Question

我使用react + redux来实现一个网站。例如，有两个顶级React组件，Dashboard和User，Dashboard显示最新问题，User显示用户配置文件和相关问题，这是一个单页网站，我将设计如下状态：

<pre><code>

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

</code></pre>

如果用户更改用户组件上的问题状态（.eg将其删除或关闭），那么仪表板和用户页面包含相同的问题很有可能，如何在Dashboard组件上反映更改即刻？

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可以帮助您优化选择器。

如何在Redux商店中同步同一个对象？

1 个答案: