How to use react-redux-firebase - 10 common examples

//g.firestoreDB = firebase.firestore(); // can also use store.firebase.firestore()

	let extraReducers = {
		router: routerReducer,
	};
	let rootReducer = MakeRootReducer(extraReducers);
	const store = createStore(
		rootReducer,
		initialState,
		// Note: Compose applies functions from right to left: compose(f, g, h) = (...args)=>f(g(h(...args))).
		// You can think of the earlier ones as "wrapping" and being able to "monitor" the ones after it, but (usually) telling them "you apply first, then I will".
		compose(...[
			//autoRehydrate({log: true}),
			routerEnhancer,
			applyMiddleware(...middleware),
			reactReduxFirebase(firebase, reduxFirebaseConfig),
			batchedSubscribe(unstable_batchedUpdates),
			applyMiddleware(...lateMiddleware), // place late-middleware after reduxFirebase, so it can intercept all its dispatched events
			g.devToolsExtension && g.devToolsExtension(reduxDevToolsConfig),
		].filter(a=>a)) as StoreEnhancer
	) as ProjectStore;
	store.reducer = rootReducer;

	function Dispatch_WithStack(action) {
		if (g.actionStacks || (DEV && !actionStacks_actionTypeIgnorePatterns.Any(a=>action.type.startsWith(a)))) {
			action["stack"] = new Error().stack.split("\n").slice(1); // add stack, so we can inspect in redux-devtools
		}
		store["dispatch_orig"](action);
	}
	if (store.dispatch != Dispatch_WithStack) {
		store["dispatch_orig"] = store.dispatch;
		store.dispatch = Dispatch_WithStack;

function AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showSuccess, showError } = useNotifications()

  // Get profile from redux state
  const profile = useSelector(state => state.firebase.profile)

  if (!isLoaded(profile)) {
    return 
  }

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => showSuccess('Profile updated successfully'))
      .catch(error => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        showError('Error updating profile: ', error.message || error)

function ProjectTile({ name, projectId, showDelete }) {
  const classes = useStyles()
  const history = useHistory()
  const firebase = useFirebase()
  const { showError, showSuccess } = useNotifications()

  function goToProject() {
    return history.push(`${LIST_PATH}/${projectId}`)
  }

  function deleteProject() {
    return firebase
      .remove(`projects/${projectId}`)
      .then(() => showSuccess('Project deleted successfully'))
      .catch(err => {
        console.error('Error:', err) // eslint-disable-line no-console
        showError(err.message || 'Could not delete project')
        return Promise.reject(err)
      })
  }

function ProjectTile({ name, projectId, showDelete }) {
  const classes = useStyles()
  const history = useHistory()
  const firestore = useFirestore()
  const { showError, showSuccess } = useNotifications()

  function goToProject() {
    return history.push(`${LIST_PATH}/${projectId}`)
  }

  function deleteProject() {
    return firestore
      .delete(`projects/${projectId}`)
      .then(() => showSuccess('Project deleted successfully'))
      .catch(err => {
        console.error('Error:', err) // eslint-disable-line no-console
        showError(err.message || 'Could not delete project')
        return Promise.reject(err)
      })
  }

const dispatch = useDispatch();
    const firebase = useFirebase();
    const isCurrentUser = firebase.auth().currentUser.uid === params.id;
    const userProfileQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        storeAs: 'userProfile'
    }), [params.id]);

    const userPhotosQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        subcollections: [{collection: 'photos'}],
        storeAs: 'photos'
    }), [params.id]);
    useFirestoreConnect(userProfileQuery); // needs to be query object so can either get profile from store
    useFirestoreConnect(userPhotosQuery); // needs to be query object so can store as

    const profile = useSelector(state => (state.firestore.ordered.userProfile && state.firestore.ordered.userProfile[0]) || {});
    const photos = useSelector(state => state.firestore.ordered.photos && state.firestore.ordered.photos);
    const userEvents = useSelector(state => state.user.events) || [];
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        dispatch(getUserEvents(params.id));
    }, [dispatch, params]);

    const handleChangeTab = async (e, data) => {
        console.log(data);
        dispatch(getUserEvents(params.id, data.activeIndex));
    };

const firebase = useFirebase();
    const isCurrentUser = firebase.auth().currentUser.uid === params.id;
    const userProfileQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        storeAs: 'userProfile'
    }), [params.id]);

    const userPhotosQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        subcollections: [{collection: 'photos'}],
        storeAs: 'photos'
    }), [params.id]);
    useFirestoreConnect(userProfileQuery); // needs to be query object so can either get profile from store
    useFirestoreConnect(userPhotosQuery); // needs to be query object so can store as

    const profile = useSelector(state => (state.firestore.ordered.userProfile && state.firestore.ordered.userProfile[0]) || {});
    const photos = useSelector(state => state.firestore.ordered.photos && state.firestore.ordered.photos);
    const userEvents = useSelector(state => state.user.events) || [];
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        dispatch(getUserEvents(params.id));
    }, [dispatch, params]);

    const handleChangeTab = async (e, data) => {
        console.log(data);
        dispatch(getUserEvents(params.id, data.activeIndex));
    };

    return (

const mapStateToProps = state => ({
  authError: state.auth.authError,
  auth: state.firebase.auth,
});

const mapDispatchToProps = dispatch => ({
  signIn: authData => dispatch(signIn(authData)),
});

// We need firebaseConnect function to provide to this component
// firebase object with auth method.
// You can find more information on the link below
// http://docs.react-redux-firebase.com/history/v3.0.0/docs/auth.html
export default compose(
  firebaseConnect(),
  connect(mapStateToProps, mapDispatchToProps),
)(SignIn);

{/* Drawer menu */}
         this.closeDrawer()}>
          <div role="button"> this.closeDrawer()}&gt;
            
          </div>
        

        <div>
          {this.props.children}
        </div>
      
    )
  }
}

export default compose(withStyles(styles), firebaseConnect(), connect(state =&gt; state))(FriendlyPixLayout);

pathToJS,
  isLoaded,
  isEmpty
} from 'react-redux-firebase'
import { LIST_PATH } from 'constants/paths'
import ProjectTile from 'components/ProjectTile/ProjectTile'
import NewProjectTile from 'components/NewProjectTile/NewProjectTile'
import NewProjectDialog from 'components/NewProjectDialog/NewProjectDialog'
import LoadingSpinner from 'components/LoadingSpinner'
import classes from './ProjectsContainer.scss'

const populates = [
  { child: 'owner', root: 'users', keyProp: 'uid' }
]

@firebaseConnect([
  { path: 'projects', populates }
  // 'projects#populate=owner:users' // string equivalent
])
@connect(
  ({ firebase }, { params }) => ({
    auth: pathToJS(firebase, 'auth'),
    projects: populatedDataToJS(firebase, '/projects', populates)
  })
)
export default class Projects extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  static propTypes = {
    projects: PropTypes.object,

import { connect } from 'react-redux'
import { UserIsNotAuthenticated } from 'utils/router'
import {
  firebaseConnect,
  isLoaded,
  isEmpty,
  pathToJS
} from 'react-redux-firebase'

import { SIGNUP_PATH } from 'constants'
import LoginForm from '../components/LoginForm'

import classes from './LoginContainer.scss'

@UserIsNotAuthenticated // redirect to list page if logged in
@firebaseConnect()
@connect(({ firebase }) => ({
  authError: pathToJS(firebase, 'authError')
}))
export default class Login extends Component {
  static propTypes = {
    firebase: PropTypes.shape({
      login: PropTypes.func.isRequired
    }),
    authError: PropTypes.shape({
      message: PropTypes.string // eslint-disable-line react/no-unused-prop-types
    })
  }

  state = {
    snackCanOpen: false
  }