title: FirebaseError: Missing or insufficient permissions with react js
body: <p>firebase permission denied with these rules:
  This rule allows anyone on the internet to view, edit, and delete 
  all data in your Firestore database. It is useful for getting 
  started, but it is configured to expire after 30 days because it 
  leaves your app open to attackers. At that time, all client 
  requests to your Firestore database will be denied.
  Make sure to write security rules for your app before that time, or else
  your app will lose access to your Firestore database</p>
  
  <pre><code>rules_version = '2';
   service cloud.firestore { 
      match /databases/{database}/documents {
  
      match /{document=**} {
        allow read, write: if false;
          }
        }
     } 
  </code></pre>
  
  <p>screen shot of browser console
  <img src="https://i.stack.imgur.com/Db6AL.png" alt="screen shot of browser console"> <br /></p>
  
  <p><a href="https://i.stack.imgur.com/Db6AL.png" rel="nofollow noreferrer">output of the redux state in h3 tag</a></p>
  
  <p>code of reducer: </p>
  
  <pre><code>import { GET_ALL_SCREAM, LOADING } from "../types";
  import { db } from "../../firebase/config";
  const initialState = {
    data: [],
    loading: false,
    error: {},
  };
  export default function (state = initialState, action) {
    switch (action.type) {
      case GET_ALL_SCREAM:
        db.collection("screams")
          .get()
          .then((data) =&gt; {
            let screams = [];
            data.forEach((doc) =&gt; {
              screams.push({
                id: doc.id,
                ...doc.data(),
              });
            });
            return { ...state, loading: false, date: screams };
          })
          .catch((err) =&gt; {
            console.error(err);
            return { ...state, loading: false, error: { ...err.response } };
          });
          console.log("error is in somewhere");
          return { ...state, loading: false, error: { "error": "something went wrong" } };
      case LOADING:
        return { ...state, loading: true };
      default:
        return state;
    }
  }
  </code></pre>