Over the past few days, I decided to revamp a project of mine from April. The project has a React front end and a Ruby on Rails back end API. I rebuilt the front end, and was feeling good about the changes I’d made. Because I’m neurotic about testing, I made sure to test all the changes dozens of times locally. Everything was working beautifully.
I redeployed my app, and decided to do some quick run-throughs on the deployed version for my peace of mind. It had the opposite effect — the live version of my app barely worked at all. The front end worked fine, but anything that involved the back end was error-ing out. …
Welcome back to my series exploring state management in React applications with Redux. Here are part 1, part 2, and part 3 case you missed those (or just want to revisit). This is going to be the (hopefully) thrilling conclusion of this series.
By now, you’ve seen essentially how Redux works — how we create and dispatch actions to our reducers and update our store. We’ve talked about React-Redux, adding middleware, combining reducers. Hopefully at this point you understand generally how Redux works and why it’s useful.
But what are some of the downsides to Redux? There are a handful of common complaints — for starters, it’s a lot of boilerplate code you have to write before it can tangibly help you, and that can be annoying. There are also a lot of packages to add to make it truly functional, which often frustrates people. Plus, sometimes configuring a store is just complicated. When I began working with Redux, these were all frustrations I had with it. Fortunately, it seems I wasn’t alone, and the Redux team decided to make it even easier for us. …
Welcome back to my series exploring state management with Redux in React applications! Here are part 1 and part 2, in case you missed them or want to revisit. As always, I want to emphasize that the docs for Redux are great, and would encourage anyone who’s curious to check them out. For this installment, though, I want to dive into some tools to help keep your applications more organized and efficient — specifically, I’m going to talk about combining reducers to improve clarity and incorporating middleware to improve functionality. So let’s dive in!
Let’s talk about combining reducers. But first, why should we even bother separating reducers if we’re just going to combine them again? The simple answer is for clarity’s sake. Imagine you have a complex application with 100 different actions, and you need to refactor something. If there’s only one massive reducer, it’s much harder. It’s much easier to separate our reducers by area of responsibility — so, say you have one reducer for user interactions and another reducer for the core functionality of your app. …
Welcome back to the next installment of my series breaking down how to use Redux in React projects. If you missed part 1, it’s here. As this series expands I’m going to dive a little deeper into the methods, tools, and add-ons that can help simplify Redux. Today, I’m going to talk about React-Redux, and how you can use it to write cleaner, more predictable and efficient apps.
We’ll start with React-Redux. First, obviously, you need to install it with either npm or yarn.
npm i react-redux
yarn add react-redux
React-Redux offers a handful of essential things — the Provider component and the connect function (or the useSelector and useDispatch hooks, if you prefer). The Provider component wraps around your application and makes the store available to your app, and the connect function allows you to connect specific components to the store. Working with the Provider component is very simple — in the root index.js file, simply wrap the app component with it. …
If you’ve ever worked with React, you know managing state is central to building interesting apps. But if you’ve ever built anything with complex state in React, you know it can get hectic quickly — different components need different information, and passing props and callbacks from parent components becomes a debugging nightmare, as you sit in front of your illegible mess of code, weeping.
That last part might not be universal, but the fact is tracing the threads of application state across components is messy, inefficient, and stressful.
The idea behind Google’s Magenta is fascinating — combining machine learning with art, in an effort to “[build] smart tools and interfaces that allow artists and musicians to extend (not replace!) their processes”. The demos page illustrates how fun and dynamic these tools can be — here are a few of my favorites.
The @magenta/music library is abstracted over the WebAudio API (through Tone) and TensorFlow. That combination means Magenta is capable of both playing music and using machine learning models to generate music. …
Let’s start with a confession. I have imposter syndrome. It’s one of my core personality traits. I’ve gone through my entire life wondering when I would, inevitably, be exposed as an incompetent fraud.
There are a ton of resources available to help clarify how common imposter syndrome is. Here are a few I like.
To be clear, I’m not a therapist. I have no special insight on imposter syndrome beyond my own experience of it. In my life before programming, I was a writer. My imposter syndrome mostly manifests in my work as writer’s block (or the programming equivalent). Being frozen by the knowledge of my own inadequacy.
In my life as a writer, I had a handful of tricks to cope with this, and when I transitioned to coding, I repurposed them. They’re designed to get you started when starting a project or task feels overwhelming. …