Не могу правильно установить этот вложенный объект в неизменяемую запись

Question

У меня нет проблем с установкой неизменяемых записей плоских объектов. Но теперь у меня есть проблема, когда я хотел бы настроить запись, я думаю, может быть, список записей? Я пытаюсь получить ссылку на пользователя в моей базе данных firebase в неизменяемую запись или записи.

Итак, я загружаю свои ссылки на пользователей из firebase. Это структура выглядит так.

Я не могу понять, как вкладывать в списки. У пользователя есть список UID. Оттуда это становится намного более плоским. Но возможно ли вообще иметь список записей? Я не видел ни одного примера в Интернете, поэтому на данный момент я просто потерян. Любая помощь будет принята с благодарностью.

Если бы я делал что-то более плоское, чем просто профиль, это было бы похоже на

  export const Profile = Record({
    key: null,
    profileName: '',
    profilePic: '',
    teamName: '', 
  });

Кажется, преодоление списка UID - это первая проблема, с которой мне тяжело пройти. Пройдя этот первоначальный список, это намного лестнее.

Может быть, я даже не должен был делать это неизменным. Я открыт для других, предлагая, что делать с этими данными. Я просто привык использовать неизменяемые записи в моем приложении на данный момент. Я надеялся придерживаться этого шаблона для этого последнего бита, который у меня есть.

Answer 1

Предложение Шиамса было абсолютно точным, так что это принятый ответ. Большинство людей должно быть в состоянии принять это, если у вас есть необходимость. Однако, если вы похожи на меня и используете FireBase с редуксом и селекторами, вот как сработало предложение Shyams для меня. Я не утверждаю, что это самый чистый пример реакции / редукса / селекторов, который вы когда-либо видели, но он работает для меня.

Без лишних слов.

Изначально я получаю своих пользователей от действия редуктора и редуктора.

Мои создатели действий и действий, которые извлекают данные из базы Firebase и первоначально сохраняют их в записи значения ключевого значения из некоторых имеющихся у меня высокоуровневых функций базы данных Firebase.

import * as types from './actionTypes';
import { Record } from 'immutable';
import { FirebaseList } from 'src/firebase';

export const League = new Record({
  key: null,
  value: null
})

export const leagueFireDB = new FirebaseList({
  onLoad: loadLeagueSuccess,
},League);

export function loadLeague() {
  console.log("LOADLEAGUE::");
  return dispatch => {
    leagueFireDB.path = `users/`;
    leagueFireDB.subscribeChild(dispatch);
  };
}


export function loadLeagueSuccess(league) {
  console.log("LEAGUElOADSuccess::", league);
  return {
    type: types.LOAD_LEAGUE_SUCCESS,
    payload: league
  };
}

В редукторе для правильного возврата всех глубоко вложенных данных в подключенный компонент, который я использовал из JS. Может быть, есть лучший способ сделать это, но это сработало для меня.

import { Record, fromJS } from 'immutable';
import {
    LOAD_LEAGUE_SUCCESS,
    LOAD_LEAGUE_ERROR,
} from '../actions/actionTypes';

export const LeagueState = new Record({
    key: null,
    value: null
})

export function leagueReducer(state = new LeagueState(), {payload, type}) {
    switch (type) {
        case LOAD_LEAGUE_SUCCESS:
        return state.merge(fromJS(payload));
        
        default:
            return state;
    }

}

На моей странице лиги, связанном компоненте, у меня есть селектор, привязанный в моем mapState к реквизиту

const mapStateToProps = (state, ownProps) => {
    console.log("MYSTATE::",state)
    return {
        league: LeagueSelector(state),
    }
  }

Затем в моем селекторе я делаю последний шаг по данным Пользователей, вкладывая записи и карты, указанные в принятом ответе.

import { createSelector } from 'reselect';
import { Record, Map } from 'immutable';

var ProfileRecord = Record({
  profileName: '',
  profilePic: '',
  teamName: '', 
});

var teamRecord = Record({
     competitorKey: ''
});

class User extends Record({'profile': new ProfileRecord(), 'team':Map()}) {
  constructor({profile, team} = {}) {
    super({team: Map(team).map(x=>new teamRecord(x)), profile: new ProfileRecord(profile)})
  }
}

export function getLeague(state) {
  return state
}

export function getLeagueList(state) {
  return Map(state.league.value).map(x=>new User(x));
}

//=====================================
//  MEMOIZED SELECTORS
//-------------------------------------

export const LeagueSelector = createSelector(
    getLeague,
    getLeagueList,
);

И вот последнее доказательство нашего аккуратно глубоко вложенного и неизменного хаоса. :)

Answer 2

В основном, пока нет списка записей. Из того, что я смог найти, вы можете использовать карту со значениями записей и расширить класс Record согласно этому ответу, чтобы получить эквивалент того, что вы хотите (код ниже основан на этом подходе).

Я также мог бы найти интересную статью, в которой было несколько подходов, для той же идеи функциональным образом здесь .

Если это не совсем то, что вы ожидали, дайте мне знать.

var users = {
   'efbluh': {
    'profile': {
      profileName: 'bill',
      profilePic: 'https://blue',
      teamName: 'locals', 
    },
    'team': {
        'Lpphasd' : {
            competitorKey: 'a'
        }
    }
   },
   'fixbluh': {
    'profile': {
      profileName: 'bill',
      profilePic: 'https://blue',
      teamName: 'locals', 
    },
    'team': {
        'Lpphasd' : {
            competitorKey: 'a'
        },
        'asdsadasda' : {
            competitorKey: 'b'
        }
    }
   }
  };

var ProfileRecord = Immutable.Record({
    profileName: '',
    profilePic: '',
    teamName: '', 
  });
var teamRecord = Immutable.Record({
       competitorKey: ''
 });

class User extends Immutable.Record({'profile': new ProfileRecord(), 'team':Immutable.Map()}) {
  constructor({profile, team} = {}) {
    super({team: Immutable.Map(team).map(x=>new teamRecord(x)), profile: new ProfileRecord(profile)})
  }
}

var userMap = Immutable.Map(users).map(x=>new User(x));

// Verify that it's really a record
console.log(userMap.get('efbluh').get('profile').profileName)
console.log(userMap.get('fixbluh').toJS())
console.log(userMap.get('fixbluh').get('team').toJS())

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.4/immutable.min.js"></script>