• Head over to the Firebase Console.
• Either start a new project or pick one you already have.
• Go to Firestore Database and set up a new database in either production mode or test mode.

Open your terminal and run this command to install the necessary dependencies:

npm install firebase redux react-redux @reduxjs/toolkit redux-thunk

Create a firebase.js file in your src directory:

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

export { db };

Create a store.js file in your src directory:

import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk],
});

export { store };

Make sure rootReducer is defined in another file, like reducers/index.js.

Create an actions.js file in your src directory:

import { db } from './firebase';

export const fetchItemsSuccess = (items) => ({
  type: 'FETCH_ITEMS_SUCCESS',
  payload: items,
});

export const fetchItems = () => {
  return async (dispatch) => {
    try {
      const items = [];
      const querySnapshot = await db.collection('items').get();
      querySnapshot.forEach((doc) => {
        items.push({ id: doc.id, ...doc.data() });
      });
      dispatch(fetchItemsSuccess(items));
    } catch (error) {
      console.error("Error fetching items: ", error);
    }
  };
};

Create a reducers/itemsReducer.js file:

const initialState = {
  items: [],
};

const itemsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_ITEMS_SUCCESS':
      return {
        ...state,
        items: action.payload,
      };
    default:
      return state;
  }
};

export default itemsReducer;

Combine reducers in reducers/index.js:

import { combineReducers } from 'redux';
import itemsReducer from './itemsReducer';

const rootReducer = combineReducers({
  items: itemsReducer,
});

export default rootReducer;

Wrap your app in the Provider component in src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Connect components using useDispatch and useSelector hooks in, for example, src/components/ItemsList.js:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchItems } from '../actions';

const ItemsList = () => {
  const dispatch = useDispatch();
  const items = useSelector((state) => state.items.items);

  useEffect(() => {
    dispatch(fetchItems());
  }, [dispatch]);

  return (
    <div>
      <h2>Items List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ItemsList;

This lets your React component access data from Firebase Firestore via Redux.