DEV Community

marques woodson
marques woodson

Posted on • Edited on

18 6

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 😀😀

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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 :)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more