React-redux-firebase: feat(core): Support for react hook

[illuminist]

PR https://github.com/prescottprue/react-redux-firebase/pull/684

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

There isn't any hook support for [email protected]

What is the expected behavior?

Provide useFirebaseConnect, useFirestoreConnect, etc.

The usage might not be much different from the current implementation. Except, react-redux-firebase and redux-firestore still depend on connect HOC from react-redux and there isn't any official support for useRedux hook. Only closest thing is https://github.com/facebookincubator/redux-react-hook which I believe not production ready yet; which is the main reason I haven't migrate to full hook.

Another reason is recompose is currently being deprecated, which makes HOC kind of deprecated, too. The package author also encourage us to use react hook instead.

So overall, hook has potential to simplify intenal code via useEffect hook as I have done in my unpublish project. However, this feature might not be happen before any official redux hook being publish. But shouldn't we discuss what API we need and how we will use those features?

For my case, I would like to create a custom hook with firebase hook inside to provide necessary data to dumb component. Eg:

const useShop = (shopId) => {
  useFirestoreConnect([{
    collection: 'shops',
    doc: shopId,
  ]})
  const mapState = useCallback(state => state.firestore.data.shops[shopId], [shopId]) 
  const shop = useMappedState(mapState) // usage according to redux-react-hook, equivalent to connect HOC

  return shop
}

const ShopDisplay = ({ shopId }) => {
  const shop = useShop(shopId)
  return (
    <div>
      <h1>{shop.name}</h1>
    </div>
  )
}

[prescottprue]

Love the idea, thanks for posting! For now you should be able to create your own custom hooks that call react-redux-firebase internally (since there is nothing preventing usage with hooks).

[peteruithoven]

Shouldn't this issue be closed now that the PR is merged?

[illuminist]

@peteruithoven I still need some more input and developer feedback so I can implement more features into a hook so I think it's might unnecessary to close this issue yet.

[peteruithoven]

Ah, in that case, let me copy one idea from https://github.com/prescottprue/react-redux-firebase/issues/703#issuecomment-493899513. My suggestion was to have useFirestoreConnect return selectors to access Redux state. Example:

import React from 'react';
import { useSelector } from 'react-redux'
import { useFirestoreConnect, isLoaded, isEmpty } from 'react-redux-firebase';

export default function List() {
  const { getOrdered, getError } = useFirestoreConnect({
    collection: 'todos',
    where: ['visibility', '==', visibility],
  });
  const todos = useSelector(state => getOrdered(state))
  const error = useSelector(state => getError(state))
  if (!isLoaded(data)) return 'Loading...';
  if (isEmpty(data)) return null;
  if (error) return error.message;
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.name}</li>
      ))}
    </ul>
  );
}

[illuminist]

Take a note that query as an object need to be memoized in order to use the hook correctly

const query = useMemo(() => ({
  collection: 'todos',
  where: ['visibility', '==', visibility],
}), [visibility])
const { getOrdered, getError } = useFirestoreConnect(query);

[Shreky]

Hi,
First, thank you for the efforts!
I just tried to use the useFirebase hook on a typescript based project and it didn't work.
apperantly, the recent version (v3, alpha 12) doesn't have an updated typescript definitions.
Do you plan to add it sometime?

Right now, my workaround is to import react-redux-firebase/src/useFirebase directly.

Thanks.

[prescottprue]

Types added in v3.0.0-alpha.13 release. @Shreky the types for useFirebase are in there so let me know if that works well for you

[Shreky]

Hey @prescottprue,
Thank you for the update.
Now useFirebase is available, but appears like it is of type ExtendedFirebaseInstance therefore, I am not able to use auth actions like: logout(). I think the definition should include Auth:
export function useFirebase(): ExtendedFirebaseInstance & Auth & Storage.

[prescottprue]

@Shreky Made that change and confirmed it fixed what you were mentioning, I'll try to release soon.

It would probably be nice to combine all of the different action set types into the actual ExtendedFirebaseInstance type itself, but this should work for now

[prescottprue]

More updates have been made to hooks recently by @illuminist and myself. Make sure to update from next for the newest updates! Going to close this since they are now supported.