My first foray into React and Redux was pretty terrible. I had started working on a project that had a bad implementation, and I hated it.
I also found Redux to be strange and pointless to begin with, feeling like it was just unnecessary repetition for defining data and functions. It didn’t help that most of my prior JS experience was some mild jQuery with ASP.NET, so I was still coming up to speed with the SPA & React paradigms. The thing that truly clued me into it’s value was trying to make a React application without Redux.
My greatest takeaway with developing with React is that fighting against how they want you to build it never works. Just go with the flow.
I use react-create-app to start my React projects. Then, I install the following packages:
I don’t really make subfolders for each component or anything. I found the React Boilerplate takes this approach, but I found that approach over-engineered. The approach I use now feels a lot more natural.
I use the lib\ folder for anything that isn’t React/Redux related. E.g. I keep a consts.js file in there for global constants, and an api.js for any calls to external services I make, amongst other things.
This is usually how I make a container. The container renders a matching Page component, and passes through button event handlers, the props, and any local state.
This is fundamentally all I do in these containers. If I start creating some event handler and writing an if statement inside of it, then I know I’m probably doing it wrong and need to offload that work to an action instead.
Components must be dumb. You can guarantee that by not even declaring them as a class but by just returning JSX:
That Segment Component - that comes from Semantic UI. If I have a “Page” component exceed a couple of hundred lines of code, then I usually break up bits of that into subcomponents for better readability.
I’ve found the majority of actions are just:
Start to do something async (“REQUESTED”)
Finish doing something async (“SUCCESS”)
Catch any failures (“FAILED”)
Which is what mose of my actions end up looking like: