State管理、Reactにおける関数コンポーネントではなく普通の関数の取り扱い

Question

前提

フロント：React
サーバー：Node.js
データベース：MongoDB
でTodoアプリを作成しています。

実現したいこと

一応作成できたのですがデータベースを変更しているだけでStateを変更できていないのでリロードをしないと表示が変わりません。
じゃあStateを変えろという話なのですが、コンポーネントの切り分けの過程でState管理が難しくなってしまいました。
Stateの管理が適当だったので親元で管理するように変更しました。またデータベースのやり取りの関数も親元に全て配置しました。
構成としては
App.js内で{FormView}と{ListView}コンポーネントを表示しています。
App.jsで[tasks, setTasks]としてStateを管理。またデータベースのやり取りをする関数をまとめて置いています。
showTasks(),createTask()等。
問題はこれらの関数内でsetTasksをするわけですが、buttonのonClick等で発火させたいため他のコンポーネントで使用する必要がありますがexportできないので使用できません。

発生している問題・エラーメッセージ

質問としては
・データベースと連携するためのメソッドはどのファイルに記述(管理)するのが適切か(関数はStateを取り扱う必要あり)
・データベースの更新とともにStateを更新するためにはどのようにしたらよいか

該当のソースコード

function App() {
  const [tasks, setTasks] = useState([]);
  // データベースにアクセスして全てのタスクをセットする
  const showTasks = async () => {
  };

  const createTask = async () => {
  };

  const deleteTask = async (_id) => {
  };

  useEffect(() => {
    console.log("副作用が実行されました。");
    showTasks();
  },[]);

  return (
    <div className='todo_container'>
      <FormView}></FormView>
      <ListView></ListView>
    </div>
  );
}

export default App;

Comments

[hoshi-takanori]

「React 状態管理」とかでググると良いかも…。
https://zenn.dev/yuki_tu/articles/a7b0a1a90c09f4

Answer 1

以下のようなことじゃなくてでしょうか？

Parent.tsx

親コンポーネントでは子コンポーネントにpropsを渡す

import { useState, useEffect } from 'react'

import Child from "./Child";

function Example() {
  const [task, setTask] = useState("");

  const handleClick = () => {
    setTask("task");
  };


  useEffect(() => {
    console.log("副作用が実行されました。");
    // showTasks();
  },[]);

  return (
    <div>
      <Child handleClick={handleClick}/>
      <div>
        {task}
      </div>
    </div>
  );
}

export default Example;

Child.tsx

子コンポーネントではprops経由で関数を実行する

function Child(props: any) {
  return (
    <div>
      <button onClick={props.handleClick}>Click</button>
    </div>
  );
}

export default Child;