others / www.youtube.com2024-09-23
EVERYTHING you need to KNOW about Remix.run ACTIONS
Today we go over how actions inside of React Router v7 / Remix.run work. How you submit to them, what happens when you do, how they re-trigger loaders, resource routes, multiple forms on a single page handling. Custom HoC and middleware and much much more!
👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together.
📌 Stay Connected:
Twitter: https://twitter.com/AlemTuzlak
GitHub: https://github.com/AlemTuzlak
Company Github: https://github.com/forge42dev
⏱️ Timestamps:
00:00 - Intro
00:33 - What are remix actions?
01:04 - Usual submission flow
03:37 - Action submission flow
06:13 - loaders re-triggering flow
07:19 - what you can use re-triggers for
07:59 - Why re-triggers are awesome
08:26 - what happens when you submit to an action?
08:46 - returning response from an action
09:36 - throwing responses
09:57 - throwing a redirect response
10:36 - when is it useful to throw responses
11:02 - throwing non-redirect responses
12:05 - difference between a thrown redirect and normal response
12:53 - useActionData important info
13:45 - resource routes
15:28 - why are resource routes awesome
17:13 - setting up the playground
17:56 - adding a progressively enhanced form
18:37 - triggering an action
19:03 - adding fields to the form
19:37 - seeing our server data
20:23 - progressive enhancement with no JS
22:19 - handling multiple forms on a page with single action
26:05 - handling multiple forms on a page with resource routes & tRPC like loaders
29:59 - redirecting from actions to new routes
31:30 - throwing responses & errors into error boundaries
33:03 - redirecting on successful submissions
33:39 - adding action middleware
35:20 - outro
🔖 Tags:
Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial
