ReduxでのThunkの直接ディスパッチ
コンポーネントからアクションをディスパッチする際、
コンポーネント内ではstoreに直接アクセスできないため、
フック useDispatch を使用しました。このフックは
storeのメソッド dispatch を返します。
今回は、販売者のオブジェクトを取得し、
アプリケーション起動時に一度だけ実行する必要があります。
これは、ワーカーの動作開始後、メインアプリケーションファイル
main.jsx から直接行うことができます。
製品アプリケーションを開き、
その中のファイル main.jsx を開いて、
thunk fetchSellers をインポートしましょう:
import { fetchSellers } from './parts/sellers/sellersSlice'
このファイルではstoreにアクセスできるため、
ここではフックは不要で、
直接そのメソッド dispatch を利用できます。
次の行の後に追加しましょう:
await worker.start({ onUnhandledRequest: 'bypass' })
次の行を追加します:
store.dispatch(fetchSellers())
アプリケーションを起動しましょう。これで、 製品カードには販売者も表示されます:
学生用のアプリケーションを開いてください。
その中のファイル main.jsx を開いてください。
thunk fetchTeachers をインポートし、
store.dispatch メソッドを使用して直接ディスパッチしてください。