DEV Community

marques woodson
marques woodson

Posted on • Updated on

You gotta try the react-redux hooks!!

Readers, if you're using Redux in a React project, you have to try these react-redux hooks. You will love them!

Look at the old way:

const UserComponent = (props) => {
  return (
    <div>
      {props.profile.name}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    profile: state.userReducer.profile,
    auth: state.authReducer.auth
  }
}

export default connect(mapStateToProps)(UserComponent);

Enter fullscreen mode Exit fullscreen mode

And the hooks way:

import { useSelector } from 'react-redux';

const UserComponent = (props) => {
  const profile = useSelector(state => state.userReducer.profile);
  const auth = useSelector(state => state.authReducer.auth);

  return (
    <div>
      {props.profile.name}
    </div>
  )
}

export default UserComponent;

Enter fullscreen mode Exit fullscreen mode

The same goes for dispatching an action.

Before hooks:

const UserComponent = (props) => {
  const login = () => {
    props.login();
  }

  return (
    <div>
      {props.profile.name}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    profile: state.userReducer.profile,
    auth: state.authReducer.auth
  }
}

function mapDispatchToProps(dispatch) {
  return {
    login: () => dispatch(userActions.login),
    logout: () => dispatch(userActions.logout),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(UserComponent);
Enter fullscreen mode Exit fullscreen mode

After:

import { useSelector, useDispatch } from 'react-redux';
import userActions from './actions';

const UserComponent = (props) => {
  const profile = useSelector(state => state.userReducer.profile);
  const auth = useSelector(state => state.authReducer.auth);
  const dispatch = useDispatch();

  const login = () => {
    dispatch(userActions.login);
  }

  return (
    <div>
      {props.profile.name}
    </div>
  )
}

export default UserComponent;

Enter fullscreen mode Exit fullscreen mode

You HAVE to try these hooks! That's all. Enjoy your weekend 😀😀

Top comments (7)

Collapse
 
markerikson profile image
Mark Erikson

Glad you like them! Also, please check out our new official Redux Toolkit package. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once:

redux-toolkit.js.org

Collapse
 
mwoodson profile image
marques woodson

Oh interesting, I'm taking a look now. Thanks 😊

Collapse
 
jeremyjackson89 profile image
Jeremy Jackson

I'm with ya. When using React I enjoy using hooks (with or without redux) much more than the old way. Based on my experience with both, hooks are easier to use and less code to write.

Collapse
 
jacobdcastro profile image
Jacob D. Castro

Oh man. I'm excited to utilize these ASAP!!!

Collapse
 
dbshanks profile image
Derek Shanks

This is great. I put off Redux for such a long time due to class component patterns.

Hooks just makes things so much better to work with. Now I’m going to enjoy working with Redux with the hooks options.

Thanks for the write up!

Collapse
 
mwoodson profile image
marques woodson

You're welcome, I'm glad you liked it ☺️

Collapse
 
davidsoderberg profile image
David Söderberg • Edited

I did a refactoring to use this all over my project :)