I remember several years ago when I first heard Pete Hunt talk about React at a conference. What is this thing? Virtual dom? Everything in the same file? Seemed wild.
Then about 6 months later, at my new job at PayPal I sat down and took an earnest look at React. Within about 15 minutes, I got it. First time experience was nice. I was never blocked on a problem more than 5–10 minutes.
Diving into React fully, it took me a few days to fully grasp it and work through a bunch of the quirks. Flux on the other hand took me about 2 weeks. With React I was working with something new and interesting, but not fundamentally different than Backbone.js was. Flux on the other hand introduced a lot of concepts and a way of thinking that was entirely new to me. I wrestled with it for about 2 weeks on a work project (gratefully I was given time to work on this). Then Redux was gaining a lot of steam, so I migrated the code to Redux and loved it. It helped solve a lot of the problems I was running into with just React.
I’m a big fan of Redux. It can be very helpful to solve state problems in your app. It gets a bad rap for lots of boilerplate and some parts that are difficult to grasp. I’ve found that breaking Redux down to the basic building blocks (especially when starting out) very much helps with comprehension and the learning curve.
Here are 3 examples of simple redux apps in one file, with as little boilerplate and fanfare as possible.
Example 1: Score Keeper without React
Simple redux example without the boilerplate
Often when using Redux you’ll see action creators (really just a function that returns an action object that the reducer expects), and many different files. Those aren’t needed. You can use Redux in as simple or complicated a way as you want.
Example 2: Redux in React app
Redux in a react app. Everything in same file. No connect()
A demo of the component above in action
Here we take it one step further and integrate with React. We update the Redux store from a React event by calling store.dispatch(). We subscribe to Redux store updates via store.subscribe() and ensure that the React UI is updated by calling this.setState() with the new value which forces a re-render of the component with the new state.
For the final example, we’ll add connect().
Example 3: Using React-Redux and connect()
For React apps, it’s most common to connect the React component to the Redux store using the connect() method from the react-redux package which provides the official Redux bindings for React.
connect() does essentially the same as store.subscribe() but has some performance benefits, and allows you to bind the Redux state to this.props or this.state in the component.
Let’s take example 2 and use connect() instead:
Let’s take example 2 and add React-Redux with connect()
We can immediately see that the component is smaller, because connect() handles the subscription and re-rendering the component with state updates for us. Hopefully this helps.
