Javascript,Redux转换,同步/嵌套Promise

时间:2019-02-07 17:28:05

标签: javascript firebase react-redux redux-thunk

我有一个直接消息传递应用程序。所有数据都存储在Firebase中。每个聊天都包含一组用户ID。

我使用以下功能从componentDidMount()获取所有聊天记录:

return dispatch => new Promise(resolve => FirebaseRef.child('chats')
    .on('value', snapshot => resolve(dispatch({
      type: 'CHATS_REPLACE',
      data: snapshot.val() || [],
    })))).catch(e => console.log(e));

经历的时间:

chatReducer(state = initialState, action) {
  case 'CHATS_REPLACE': {
      let chats = [];

      if (action.data && typeof action.data === 'object') {
        chats = Object.values(action.data).map(item => ({
          id: item.id,
          title: item.title,
          authorizedUsers: Object.values(item.authorizedUsers).map(user => ({
            id: user.id,
            // Somedata: fetchUserData(user.id)
            // -> pretty sure it can't be done here <-
          })),
        }));      
      }

      return {
        ...state,
        error: null,
        loading: false,
        chats,
      };

我该如何从users/:uid的Firebase的每次聊天中获取每个用户的更多数据?

1 个答案:

答案 0 :(得分:0)

我不知道这是什么用例。如果您可以共享(例如,要使用多少用户信息),那就太好了。如果数据很小,为什么不将其添加到同一API中。您可以将用户数据作为键与用户ID传递到同一对象中,并在嵌套数据中使用相同的键,例如(仅当用户数据较小或您知道API数据总是受限制(例如由于分页或页面大小)时):

{
    posts : [
     {
       title : 'abc'
       authorizedUsers : ['1a', '2b', '3c']
     }, ....
     ],
     users : {
      '1a' : {
          name : 'john doe',
          profileImage : 'https://some.sample.link',
        },
       '2b' : {
          name : 'bob marshal',
          profileImage : 'https://some.sample.link2',
        }
     }
}

如果数据量巨大或无法在API中添加数据(因为API由第三方拥有),则只有可以放置代码的位置,而不是仅在收到响应后分派操作,而是遍历响应仅在您的服务中,进行异步调用以仅获取所有“ 唯一用户”,然后将该数据附加到您从上一个api调用接收到的数据中,然后将包含完整数据的操作分派到存储中。这可能不是最好的方法,因为所有内容都将停滞,即使在第一个api中接收到的数据也将停滞(在屏幕上不更新),直到获取所有用户数据为止。但是,只有在我们了解用例的更多细节之后,才能给出最佳解决方案。就像当最终用户滚动屏幕并可能看到特定帖子时懒惰地获取用户数据,或者从第一个API调用开始呈现数据后获取用户详细信息一样,例如制作一个组件来显示与帖子相关联的用户,并在其componentDidMount中,您从顶部组件(可能是“文章/帖子/博客”组件)传递了作为道具的userIds,并在实际渲染“文章/博客/帖子”时获取了数据。

希望这会有所帮助。