Direct Thunk Dispatch in Redux
When we dispatched actions from components, we used the useDispatch hook, which returns the store dispatch method, since components do not have direct access to the store.
This time we need to get the objects with the sellers and do it once when our application starts. We can do it directly from the main file main.jsx of the application, after the worker starts working.
Let's open our product app, and in it the file main.jsx and import the thunk fetchSellers into it:
import { fetchSellers } from './parts/sellers/sellersSlice'
In this file we have the store available, so no hooks are needed here and we can directly use its dispatch method. Let's do it after the line:
await worker.start({ onUnhandledRequest: 'bypass' })
Let's add the following:
store.dispatch(fetchSellers())
Let's launch our application. Now the product cards also show the sellers:
Open your app with students. Open the main.jsx file in it. Import your thunk fetchTeachers into it and send it directly via the store.dispatch method.