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

Question

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.

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!

Correct me if I am mistaken, doesn't `get(state.get('firebase')` return a promise? And you're trying to assign an unfulfilled promise to `user`? Anyhow, it may be preferable to have your data-fetching occur in an action creator, then passing that payload to a reducer to which you `connect` and do your mapping or dispatching to props. — ethane, Jan 05 '18 at 20:46
Also, is it intentional that your `console.log(state.get('firebase'))` differs from `(user: get(state.get('firebase'))`? — ethane, Jan 05 '18 at 20:52
@NoMoreQuestions Hmm, with 90% sure `firebase` is an object. And it's likely the same as I would destructure it as it's shown in the docs (`({ firebase })`). Also mind that `firebase` is already a connected reducer, with built-in action creators. — Patrickkx, Jan 05 '18 at 20:53
@NoMoreQuestions Yes, it's just copy-paste from official docs and it should.. work :/ — Patrickkx, Jan 05 '18 at 20:54
A bit suspicious if your `console.log()` prints your data but `user` remains `undefined`. Have you changed these to be identical? — ethane, Jan 05 '18 at 20:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162630/discussion-between-nomorequestions-and-patrickkx). — ethane, Jan 05 '18 at 21:03

Patrickkx · Accepted Answer · 2018-01-05T23:53:32.127

1

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.

edited Jan 05 '18 at 23:53

answered Jan 05 '18 at 21:17

Patrickkx

1,740
7
31
60

score 1 · Answer 2 · answered Jan 06 '18 at 21:24

Author of react-redux-firebase here. Totally open to pull requests for changes to the docs to make this more clear.

Something to note: the original question uses v1.. syntax which is different from v2.. with respect to how things are stored in redux (Immutable.js is no longer used). This means that state.get is no longer a function.

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

2 Answers2