Redux Hooks!
Tags: redux, hooks, react, discuss
Published: 2019-12-12 06:25:10

The react-redux library has recently come out with two new hooks that offer us an alternative to the connect HOC, when in a functional component. So, first, let's take at what the connect HOC does:

```react
import React, { useEffect } from "react";

// We need to import connect
import connect from "react-redux";

// We're importing our action function from our actions store
import { actionFunction } from "./store/actions/actionFile"

function App() {

  /* Since we have added our action function to the object in our
  connect HOC we can access that function through props */
  const onClick = () => props.actionFunction()

  return (
    <div>
      <h1>Hello, world!</h2>
      {/* we have mapped out the state from our reducer to 
      our props where we can access it now */}
      <button onClick={onClick}>{props.stateIWant}</button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    stateIWant: state.reducer.stateIWant
  }
};

/* connect HOC takes in a mapStateToProps function as first object
and takes in an object that we can add our action functions too so
that we can dispatch our actions */
export default connect(
  mapStateToProps, 
  { actionFunction }
)(App);
```

#### Now let's take a look at this same code, but using redux hooks instead of the connect HOC:

```react
import React, { useEffect } from "react";

// These are the two hooks we get from the react redux api
import { useSelector, useDispatch } from "react-redux";
// useSelector replaces the mapStateToProps in our connect HOC
// useDispatch replaces the object we add our action functions to

// We're importing our action function from our actions store
import { actionFunction } from "./store/actions/actionFile";

export default function App() {
  // This is the convention for setting up your useDispatch every time
  const dispatch = useDispatch();

  /* We are passing our action function through our useDispatch so that
  we can dispatch our action function */
  const onClick = () => dispatch(actionFunction());

  // Here we are using useSelector to grab the state we want from our reducer
  const stateIWant = useSelector(state => state.reducer.stateIWant)

  return (
    <div>
      <h1>Hello, world!</h2>
      {/* we no longer need to access stateIWant from props because we gave it
      it's own variable */}
      <button onClick={onClick}>{stateIWant}</button>
    </div>
  );
}
```

#### Don't forget! You can always deconstruct multiple pieces of state from a reducer with useSelector as well...

```javascript
const { first, second, third } = useSelector(state => state.reducer)
// Is equivalent to:
const first = useSelector(state => state.reducer.first)
const second = useSelector(state => state.reducer.second)
const third = useSelector(state => state.reducer.third)
```

## Conclusion
I think when working with functional components, the redux hooks offer an elegant alternative to the connect HOC. Personally I quite prefer them over connect. Writing out all the boilerplate for the connect HOC always seemed a little burdensome for me. 

What do you think? Do the new react-redux hooks are worth using? Or do you plan on sticking with 'old faithful' connect HOC? I'd love to hear your thoughts in the comments! See you guys again soon.