React-redux-firebase populate doesn’t work

Question

I tries to replace IDs within my data with other data from Firebase using populate but it doesn't work.

I use "firebase": "^7.3.0", "react-redux-firebase": "^3.0.5", "redux": "^4.0.4", "react-redux": "^7.1.3", "redux-thunk": "^2.3.0".

My firebase db click to show

App.js

import React, { Component } from 'react';
import AppContainer from './config/routes';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import { firebase} from './config/firebase';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk.withExtraArgument(getFirebase)),
);

const rrfConfig = {
 userProfile: 'users',
 profileParamsToPopulate: [
   { child: 'nutrient', root: 'nutrients_list' } 
 ]
}

const reactReduxFirebaseProps = {
  firebase,
  config: rrfConfig ,
  dispatch: store.dispatch,
};

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ReactReduxFirebaseProvider {...reactReduxFirebaseProps}>
          <AppContainer />
        </ReactReduxFirebaseProvider>
      </Provider>
    );
  }
}

config.js

import firebase from 'firebase/app';
import 'firebase/database'

const config = {
  apiKey: 'my apiKey'
  authDomain: 'my authDomain',
  databaseURL: 'my databaseURL',
  projectId: 'my projectId',
  storageBucket: 'my storageBucket',
  messagingSenderId: 'my messagingSenderId',
  appId: 'my appId',
  measurementId: 'my measurementId',
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export { firebase }

Food.js (in this component I use populate)

import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { firebaseConnect, populate, isLoaded, isEmpty } from 'react-redux-firebase';

class Food extends Component {
render() {
    const { mealsArray } = this.props;

    if (!isLoaded(mealsArray)) {
      return <ActivityIndicator size="large" />
    }

    if (isEmpty(mealsArray)) {
      return <Text>There is no meals </Text>
    }

    return (
      <View>
        <ScrollView>
          <Text>{JSON.stringify(mealsArray, null, 2)}</Text>
        </ScrollView>
      </View>
    );
  }

const populates = [
  { child: 'nutrient', root: 'nutrients_list' }
]

const mapStateToProps = state => {
    return {
    mealsArray: populate(state.firebase, 'meals', populates)
  };
};

export default compose(
  firebaseConnect([
    { path: 'meals', queryParams: ['orderByChild=date', 'equalTo=18/11/2019'], populates},
  ]),
  connect(
    mapStateToProps,
  ),
)(Food);

I want that key 'nutrient' will return object instead of id number:

{
  nutrient: {
    name: 'buckwheat',
    proteins: 12.6,
    fats: 2.6,
    carbs: 68,
    calories: 329,
    water: 10,
  },
  number: 1,
  weight: 100,
}

Any ideas? Some one can help me? – Darkleon Nov 23 '19 at 14:58 — Darkleon, Nov 23 '19 at 14:58

score 0 · Answer 1 · answered Nov 23 '19 at 16:04

It seems like you are trying to populate a list of items (nutrients) within each item in a list (meals), which is two levels deep. Multi level deep population is not currently supported in populate, you may be better off having a separate component for each meal. Then within each meal component, you can loop over the nutrients and run populate on each single nutrient.

Instead, it may be better to just be storing a unique key for each nutrient then maybe store the meta information about the nutrient within the meal under another key, maybe nutrients_amounts or nutrients_meta

It would also be using unique keys generated by push for the item keys instead of array indexes. This makes referencing values in another section of your database much easier and it helps avoid the case of sparse arrays.

React-redux-firebase populate doesn’t work

1 Answers1