React-redux-firebase: getState() with thunk returns firebase as a map

[brianlovin]

Hey there – I'm trying to use the firebase.profile from redux in order to construct some queries to firebase, based on the user's uid. I'm having trouble accomplishing this in my action. Here's what I'm running:

export const foo = () => (dispatch, getState, getFirebase) => {
  const firebase = getFirebase()
  const state = getState()

  console.log(firebase, state)
  ...
}

And state in this case returns:

Which means I can't access my profile stored in firebase.profile.

It's odd because in my redux store I can see all of this information:

Does this look familiar at all?

[prescottprue]

This is the intended functionality. The data within state.firebase is an immutable Map. In order to get data from a data path use dataToJS(). For things at the top level such as auth and profile use pathToJS().

Note: redux-devtools displays Maps as objects (which is why you are seeing the data)

An action can use uid like so:

export const foo = () => (dispatch, getState, getFirebase) => {
  const profile = pathToJS(getState().firebase, 'profile')
  getFirebase().push(`some/${profile.something}`, { some: 'val' })
}

[brianlovin]

Hm, still having trouble accessing the profile info itself. My action is now:

export const setStories = (frequency) => (dispatch, getState, getFirebase) => {
  const firebase = getFirebase()

  const userData = dataToJS(firebase, 'profile')
  const userPath = pathToJS(firebase, 'profile')
  console.log('user data is: ', userData)
  console.log('user path is: ', userPath)
}

And I see this in the console:

[prescottprue]

Make sure to use getState().firebase instead of getFirebase() like so:

export const setStories = (frequency) => (dispatch, getState, getFirebase) => {
  const userPath = pathToJS(getState().firebase, 'profile')
  console.log('user path is: ', userPath)
}

[brianlovin]

Sorry for the troubles here, this is still returning undefined.

Code:

export const setStories = (frequency) => (dispatch, getState, getFirebase) => {
  const firebase = getFirebase()
  const state = getState()
  const userPath = pathToJS(state.firebase, 'profile')
  console.log('fb is: ', firebase)
  console.log('state is: ', state)
  console.log('user path is: ', userPath)
}

output:

[prescottprue]

Have you imported pathToJS? Can you share a whole repository or at least a complete snippet with imports?

It would also be nice to include the component where you are dispatching the action as well as your reactReduxFirebase from the compose call.

[brianlovin]

Wow. It's because I was dispatching from a componentDidMount() using nextProps.dispatch. Changing to this.props.dispatch seems to have cleared it up – thanks so much for your quick replies here Scott, really appreciate that!

[piya23300]

@brianlovin I have the same problem like you.
Can you show the code example to solve it?

@prescottprue Can you help me?
createStore

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const initialState = {};

const store = createStore(
  rootReducer,
  initialState,
  composeEnhancers(
    applyMiddleware(
      thunk.withExtraArgument(getFirebase)
    ),
    reactReduxFirebase(firebaseConfig, config)
  )
);

action

export const loadAllQuizzes = () =>
  (dispatch, getState, getFirebase) => {
    // const firebase = getFirebase();
    const state = getState();
    const auth = pathToJS(state.firebase, 'auth')
    const quizzes = dataToJS(state.firebase, '/quizzes');
    dispatch(updateQuizzes(quizzes));
    console.log("quizzes : ", quizzes);
    console.log("auth : ", auth);
  };

console

[prescottprue]

@piya23300 I don't believe what you are seeing is related to this issue.

In your example, quizzes will be undefined unless that data is first loaded into redux (dataToJS just gets it out of redux)

If you are trying to load data, you should look into firebaseConnect. It is the common pattern for loading data, since it attaches/detaches appropriate listeners when components are mounted/unmounted. This is how data is loaded in the material example including loading todos.

Also, the projects route is an example of using populate if you are interested in that.

If you believe you are still having problems, feel free to open up an issue or hop on gitter with your questions.

[piya23300]

@prescottprue Thank you. I followed your example. It does not work because I forgot to change database roles at Firebase.

I have to enable enableLogging: true so I will see why the data is null ^^.
Thank you so much.