Clean Up React Code with useReducer | Code Renovation

[@Stoney_Eagle]

Sometimes extra boilerplate code "reduces" complexity and makes things more managible. Man these CJ videos are a freaking goldmine for new developers, I wish I had these when I started! (I do miss your shenanigan live streams CJ) 😊

[@madmaxdev]

Sometimes, I find it challenging to work with TypeScript, particularly when it comes to defining and integrating types in a way that flows seamlessly within the code. I watched your Hono Starter API video, where you wrote TypeScript effortlessly and seamlessly. Could you please create a video explaining how to work with TypeScript effectively, focusing on proper practices for defining and integrating types?

[@StingSting844]

Yeah I need this too. But I'm afraid we'll get the knowledge only by building lots of small things and gaining through pain. Every OSS project starts with rudimentary types and then someone comes along and makes it super well typed!

[@thedelanyo]

I'm primarily a Svelte developer but I'm learning a good stuffs watching you write ReactJs 😅😅😅

[@daveisdead]

CJ always comes in with the bangers

[@St0rMsk]

Someone call 🚒 CJ is on 🔥

[@marwen_dev]

Thanks CJ, great insights 🎉! Waiting for your take on tanstack start.

[@AlbertoVasquez1]

Thank you very much for the amazing example!

[@MrCloudTel]

This is awesome

[@DarrylHebbes]

This is more about types and less about reducers and why they differ from regular state

[@DontFollowZim]

Yup, still hate this pattern. Why would we prefer to put all these actions into a single function and call them using a string name rather than creating a function for each action so we don't rely on magic strings and switch statements? I also hate the { ...state, ...payload} pattern that functional programming and immutability force on you. I'm so much happier with Vue's reactive state.

[@syntaxfm]

This pattern is definitely not for everyone. One of the main benefits is consolidation / colocation of logic. The action types as plain strings only makes the most sense when working with TypeScript. The custom action types I created enforce the combination of a type and payload (you cannot mix and match or you will get a type error).

[@BekhzodIsmoiliy]

@@syntaxfmbut you can use the same type protection for your function params using “pick” utility type. So I either cannot understand the benefit of using additional string property. Why use so many extra code with types string properties switch cases extra if statements, when you can recreate it using functions for each of your actions. And you can still manage to have pure functions if you wish

[@ayatullah8748]

I recently reduced 5-6 useState with a single reducer. just props drilling the state and dispatch. Without props drilling what else i can use any suggestions??

[@syntaxfm]

The Context API would allow you to put the reducer state / dispatch into context, and then bring it into any component with useContext and no prop drilling.

[@lnard0]

code for the finished reducer pls

[@oWeRQ666]

I don't understand, why not just use one state, and instead of action creator make functions that accept and return a state, compatible with setState.