Search code examples
firebasereduxreact-redux-firebase

React-redux-firebase loads data correctly but isnt available inside component

Following scheme from https://github.com/prescottprue/react-redux-firebase (go to Queries Based On Props paragraph).

Code responsible for fetching data from the firebase:

export default compose(
  firebaseConnect((props) => [
    `offers/${props.params.userId}`,
  ]),
  connect((state, props) => {
    console.log(state.get('firebase')) // <--- logs data correctly
    return {
      user: get(state.get('firebase'), `offers/${props.params.userId}`),
    };
  })
)(UserProfile);

If you wonder what's the .get - state is an immutable Map.

enter image description here

Issue: As you can see, the data fetches properly, but component doesn't get re-rendered. Seems like props haven't changed.

Q: How to force component to update and to receive props properly?

Thank u!

Solution

  • Together with NoMoreQuestions we have found a solution. I had to use populate function instead of get.

    import { populate } from 'react-redux-firebase';

    Weird that docs are saying something different about that.