Can't set this nested object in a immutable record correctly

Question

I have no problem setting flat object immutable records. But now I have a problem where I would like to setup a record, I guess maybe a list of records? I'm trying to get my User ref in my firebase database into a immutable record, or records.

So I load my users ref from firebase. It's structure looks like.

I can't figure out how to nest with lists. User has a list of UID's. From there it gets much flatter. But is this even possible to have a List of Records? I haven't seen any examples online so I'm just lost at this point. Any help would be great appreciated.

If I was doing something flatter like just profile it would look like.

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

It seems getting past the list of UID's is the first challenge Im having a hard time getting past. Once past that initial list it is much flatter.

Maybe I shouldn't even be doing this immutable. Im open to other suggesting for what to do with this data. Im just used to using Immutable records in my application at this point. Was hoping to stick to that pattern for this last bit I have.

Answer 1

Basically there is no list of records as of yet. From what I could find you could use map with record values and extend Record class as per this answer to get equivalent to what you want(the code below is based on this approach).

I also could find an interesting article that had multiple approaches, for the same idea in a functional wayhere.

If this is not exactly what you were expecting let me know.

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>

Answer 2

Shyams suggestion was absolutely on point so it's the accepted answer. Most people should be able to adopt that if you have a need. However if you are like me, and are using firebase with redux and selectors here is how Shyams suggestion worked for me. Im not claiming it to be the most pure example of react/redux/selectors you've ever seen but it's working for me.

Without further ado.

Initially I get my Users from a redux action and reducer.

My action and action creators to fetch the data from firebase and initially store it in a Key Value Immutable Record from some high level firebase db functions I have.

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
  };
}

In the reducer, to get a proper return of all the deeply nested data to my connected component I used fromJS. Maybe there's a better way to do this but this worked for me.

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;
    }

}

In my league page, a connected component, I have a selector wired in my mapstate to props

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

Then in my selector is where I do the finishing move on Users data by nesting the records and maps specified in the accepted answer.

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,
);

And here is the final proof of our neatly deeply nested immutable chaos. :)