Javascript, Redux Thunk, синхронные / вложенные обещания - PullRequest
Новая
       11

Javascript, Redux Thunk, синхронные / вложенные обещания

0 голосов
/ 07 февраля 2019

У меня есть приложение для обмена сообщениями.Все данные хранятся в Firebase.Каждый чат содержит массив идентификаторов пользователей.

Я использую следующую функцию, чтобы получить все чаты из 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,
      };

Как мне получить больше данных о каждом пользователе в каждом чате из Firebase на users/:uid?

1 Ответ

0 голосов
/ 07 февраля 2019

Я не знаю, каков вариант использования этого.Было бы здорово, если бы вы могли поделиться, например, сколько информации о пользователе вы хотите использовать.Если это небольшие данные, почему бы вам не добавить его в том же API только.Вы можете передавать данные пользователей в одном и том же объекте с идентификатором пользователя в качестве ключей и использовать те же ключи внутри вложенных данных, как (только если пользовательские данные малы или вы знаете, что данные 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, и затем отправьте действие сполные данные в хранилище. Это может быть не лучшим способом, так как все будет зависать, т.е. даже данные, полученные в 1-ом API, также будут останавливаться (не обновляться на экране), пока не будут получены все данные пользователей. Но лучшее решение может толькобудет дано, как только мы узнаем более подробную информацию о сценарии использования.Вы можете увидеть экран и увидеть конкретный пост. Или извлекая данные пользователя, как только вы начнете рендерить свои данные с 1-го вызова API, например, сделав компонент для отображения связи пользователя с постом, и в его componentDidMount вы передадите userIds как реквизиты из верхнего компонента, которыйможет быть компонентом «article / post / blog», и он извлекал данные в тот момент, когда фактически отображал эту статью / blog / post.

Надеюсь, это поможет.

...