Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Redux: React Counter Example

2:18 JavaScript lesson by

Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.

Avatar
Steve

I can't find any description/explanation of this variant of arrow func syntax:
({
value,
onIncrement,
onDecrement
}) =>

What does putting braces around the arguments signify?

Avatar
Joel

That will "destructure" the argument. Instead of receiving the full object this function will be passed its properties of the respective names.

It's a super useful es6 feature. See more here: https://egghead.io/lessons/ecmascript-6-destructuring-assignment

In reply to Steve
Avatar
Dana

Is creating const's the preferred way to declare components as opposed to creating classes that extend React.Component? Or was this shorthand approach written for the purposes of the tutorial?

Avatar
Dan Abramov

Let’s first clarify that const is not the point here. It only enforces that this binding is not reassigned later, but we could’ve used let (or ES5 var) just as fine when declaring a functional component. In fact

const Counter = ({ value}) => <div>{value}</div>;

is pretty much the same as

function Counter({ value }) {
  return <div>{value}</div>;
}

Now, when should you use functional components instead of classes? I’d say every time it’s possible. Support for them was added in React 0.14 so most examples in the wild don’t use them yet, but it’s usually a better pattern. Functional components match React’s conceptual model more closely. Use classes when you need this.state or lifecycle hooks like componentDidMount, but in most cases, use functional components for simplicity.

In reply to Dana
Avatar
Steven

Hi :)
Thanks for this course, it's very helpful !
I have one qestion, not about Redux... but more by curiosity !

Can you explain why in JSBin this kind of synthax can be written :
=> (

{value}
+
-

);

There are no ' or " or ` ... at the first glance i thought "it's a great new feature of ES6 ... no need to put any symbols for templating..."
But i tried, and it's crash.. of course...

Thanks for your time !

Avatar
Jesse

I would like to see an answer for this as well. Steven did you ever get it it working outside of pastebin?

In reply to Steven
Avatar
Lars-m

Hi Steven
It is perfectly legal ES6 + React.
The counter method receives the props and, using ES6 Object Destructuring Assignment, (see video refered by joel) fetches the three properties of interest.

This rewrite of the Counter method might make it a bit clearer?

const Counter = (props) => { 
  let {value,onIncrement, onDecrement} = props;
  return (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
  </div>
  )
}```
In reply to Steven
Avatar
Guille

Hi, I am not a React developer, but a quick search I found this. Hope it helps you https://facebook.github.io/react/docs/react-without-jsx.html

In reply to Steven

In the simplest counter example, I update the document body manually any time this tool state changes. But, of course, this approach does not scale to complex applications. Instead of manually updating the DOM, I'm going to use React.

I'm adding two scripts corresponding to React and react-dom packages and a root <div/> to render to. Now I can call the ReactDOM.render with my root component. The render function is called any time this store state changes, so I can safely pass the current state of this store as a prop to my root component.

const render = () => {
  ReactDOM.render(
    <Counter value={store.getState()} />
    document.getElementById('root')
  );
}

Since this state is held inside the Redux Store, the Counter component can be a simple function, which is a supported way of declaring components since React 14.

const Counter = ({value}) => (
  <h1>{value}</h1>
);

I want to add, DECREMENT, and INCREMENT buttons to the component, but I don't want to hard-code the Redux dependency into the component. So I just add onIncrement and onDecrement props as callbacks. In my render method, I pass the callbacks that call store.dispatch with appropriate actions. Now the application state is updated when I click the buttons.

const Counter = ({
  value,
  onIncrement,
  onDecrement
}) => (
  <div>
  <h1>{value}</h1>
  <button onClick={onIncrement}>+</button>
  <button onClick={onDecrement}>-</button>
  </div>
);

<Counter
      value={store.getState()}
      onIncrement={() =>
        store.dispatch({
          type: 'INCREMENT'           
        })            
      }
      onDecrement={() =>
        store.dispatch({
          type: 'DECREMENT'           
        })            
      }
    />

Let's recap how this application works. The counter component is what I call a dumb component. It does not contain any business logic. It only specifies how the current application state transforms into renderable output and how the callbacks, passed via props, are bound to the event handlers.

Counter Example

When we render a counter, we specify that its value should be taken from the Redux Store current state. When the user presses INCREMENT or DECREMENT, we dispatch corresponding action to the Redux Store. Our reducer specifies how the next state is calculated based on the current state and the action being dispatched.

Finally, we subscribe to the Redux Store, so our render function runs anytime the state changes, so the counter gets the current state.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?