fix(docs): add the required database import to use realtime database to examples - #1080

Author: prescottprue

README.md

@@ -57,6 +57,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import firebase from 'firebase/app'
+import 'firebase/database'
 import 'firebase/auth'
 // import 'firebase/firestore' // <- needed if using firestore
 // import 'firebase/functions' // <- needed if using httpsCallable

examples/complete/typescript/src/AddTodo.tsx

@@ -5,7 +5,7 @@ function AddTodo() {
   const firebase: ExtendedFirebaseInstance = useFirebase();
 
   function handleAddClick() {
-    firebase.push("todos", { done: false, text: "Example todo" });
+    firebase.push("public_todos", { done: false, text: "Example todo" });
   }
   return (
     <div className="Add Todo">

examples/complete/typescript/src/App.tsx

@@ -1,8 +1,8 @@
+import React from "react";
 import firebase from "firebase/app";
 import "firebase/auth";
 import "firebase/database";
 import "firebase/firestore"; // make sure you add this for firestore
-import React from "react";
 import { Provider } from "react-redux";
 import { ReactReduxFirebaseProvider } from "react-redux-firebase";
 import { firebase as fbConfig, reduxFirebase as rfConfig } from "./config";

examples/complete/typescript/src/Home.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import Todos from "./Todos";
 import AddTodo from "./AddTodo";
 import "./App.css";
-import logo from "./logo.svg";
 
 function Home() {
   return (

examples/complete/typescript/src/Todos.tsx

@@ -5,7 +5,7 @@ import Todo from './Todo'
 import { useSelector } from "react-redux";
 
 function Todos() {
-  useFirebaseConnect([{ path: 'todos', queryParams: ['limitToLast=10'] }])
+  useFirebaseConnect([{ path: 'public_todos', queryParams: ['limitToLast=10'], storeAs: 'todos' }])
   const todos = useSelector((state: AppState) => {
     return state.firebase.ordered.todos
   })

examples/complete/typescript/src/reducer.ts

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux'
 import { firebaseReducer, FirebaseReducer } from 'react-redux-firebase'
+import { firestoreReducer, FirestoreReducer } from 'redux-firestore'
 
 interface UserProfile {
   email: string
@@ -16,12 +17,13 @@ interface DBSchema {
   [name: string]: any
 }
 interface RootState {
-  firebase: FirebaseReducer.Reducer<UserProfile, DBSchema>
-  // firestore: FirestoreReducer.Reducer;
+  firebase: FirebaseReducer.Reducer<DBSchema>
+  firestore: FirestoreReducer.Reducer;
 }
 
 const rootReducer = combineReducers<RootState>({
-  firebase: firebaseReducer
+  firebase: firebaseReducer,
+  firestore: firestoreReducer
 })
 
 export type AppState = ReturnType<typeof rootReducer>