redux/reducer.js 内のファイルに、firestoreを接続するコードをどのファイルに書いたら良いか確認したい。

開発環境 OS CentOS Monterey(12.0.1) node(14.16.1) npm(6.14.12) material-ui(5.3.1) firebase (9.6.5) firestore react-router-dom(6.2.1) redux-toolkit

解決したいこと

上記の環境で、送金アプリを作成しています。 下記の参考サイトを見ながら、 CloudFirestoreに、コレクション（addTodo=受金者）フィールド（item, balance, completed）を作成しました。 受金者のユーザ情報を取得するコードを書き、接続したいのですが、下記のサイトの見て、ソースコードを書いたのですが、どのファイルに書いたら良いかわかりません。 どなたかアドバイスをお願いします。

参考サイト [firestoreとreduxのバインディングライブラリ「react-redux-firebase」の使い方] (https://tech.frenps.co.jp/archives/561)

import { createSlice } from "@reduxjs/toolkit";

※　参考サイトを見て書いたソースコード
const firestore = useFirestore()

const add = () => {
return firestore.add("addTodo", {
idCount: 1,
item: todo,
completed: false,
balance: 0,
});
useFirestoreConnect({
collection: "addTodo",
where: [["todo", "false", "0"]],
);

const initialState = {
  todos: [],
};

const addTodoReducer = createSlice({
  name: "todos",
  initialState,
  balance: 0,
  reducers: {
    //ここでは、reducerを書きます。
    //todoを追加
    addTodos: (state, action) => {
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    },
    //todoを削除
    removeTodos: (state, action) => {
      return {
        ...state,
        todos: state?.todos?.filter((item) => item.id !== action.payload),
      };
    },
    //todoを更新
    updateTodos: (state, action) => {
      return {
        ...state,
        todos: state?.todos?.map((todo) => {
          if (todo.id === action.payload.id) {
            return {
              ...todo,
              balance: action.payload.balance,
            };
          }
          return todo;
        }),
      };
    },
  },
});
export const { addTodos, removeTodos, updateTodos } = addTodoReducer.actions;
export const reducer = addTodoReducer.reducer;

import React, { useContext, useState } from "react";
import { connect } from "react-redux";
import { addTodos } from "../redux/reducer";
import { Box, TextField, Button } from "@mui/material";
import { AuthContext } from "../auth/AuthProvider";

const mapStateToProps = (state) => {
  return {
    todos: state?.todos,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (obj) => dispatch(addTodos(obj)),
  };
};

const Todos = (props) => {
  const { count, setCount } = props;
  const [todo, setTodo] = useState("");
  // Contextからログインユーザを取得
  const { currentUser } = useContext(AuthContext);

  const handleChange = (e) => {
    setTodo(e.target.value);
  };

  const [num, setNum] = useState(100);
  const onCountUp = () => {
    setCount(count + num);
  };
  const onCountDown = () => {
    setCount(count - num);
  };

※ 参考サイトを見て書いたソースコード

const firestore = useFirestore();

  const add = () => {
    return firestore.add("addTodo", {
     idCount: 1,
      item: todo,
      completed: false,
      balance: 0,
    });
    useFirestoreConnect({
     collection: "addTodo",
     where: [[""todo", "false", "0"]],
    });

    if (todo === "") {
      alert("Input is Empty");
    } else {
      props.addTodo({
        id: Math.floor(Math.random() * 1000),
        item: todo,
        completed: false,
        balance: 0,
      });
      setTodo("");
    }
  };

  return (
    <>
      <div style={{ textAlign: "center" }}>
        <div className="balance-list">
          <h2>
            {currentUser?.displayName ?? "未ログイン"}
            さんの残高 : {count} 円{" "}
          </h2>
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              label="入出金額"
              variant="outlined"
              value={num}
              onChange={(e) => setNum(Number(e.target.value))}
            />
          </Box>
          <Button onClick={onCountUp} variant="outlined" color="primary">
            Increment
          </Button>
          <Button onClick={onCountDown} variant="outlined" color="secondary">
            Decrement
          </Button>
        </div>
        <div className="addTodos">
          <h2>受取人一覧</h2>
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              id="outlined-basic"
              label="受取人を入力してください"
              variant="outlined"
              type="text"
              onChange={(e) => handleChange(e)}
              className="todo-input"
              value={todo}
            />
          </Box>
          <Button
            variant="outlined"
            color="primary"
            className="add-btn"
            onClick={() => add()}
          >
            受取人追加
          </Button>
          <br />
          <h2>受取人名</h2>
        </div>{" "}
      </div>
    </>
  );
};
export default connect(mapStateToProps, mapDispatchToProps)(Todos);