An Alternative to Redux’s mapStateToProps & mapDispatchToProps, this is the story of “Redux Hooks”.

Photo by Jason Leung on Unsplash

What is Redux?

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to (and inspired by) Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark. — — Wikipedia.

But, for developers, it is an alternative to Context API with lots of boilerplate. But why do we use Redux in React-Native, can’t we just pass the state as props to the child from a parent component? That’s a topic for another article.

If you have opened this article, then you might know about Redux and are tired of using mapStateToProps and mapDispatchToProps in every component/screen. But let me guide you to these amazing hooks which reduce your boilerplate and help you to manage your state more conveniently and efficiently.

mapStateToProps and useSelector()

As the name suggests mapStateToProps is used to map the State of the store to the props of the component. duh., even an eleven-year-old would have guessed it. But to increase the reading time of this article, I am writing this and none of you are reading this anyway, you are just here for the code.

function mapStateToProps(state) 
{  
return { todoList: state.todos.allIds,
         todoTitle: state.todos.title
}
} 
export default connect(mapStateToProps)(TodoList)

Here, mapStateToProps takes an argument ‘state’ which represents the state of the store and from that, we are fetching the ‘todos’ object and value ‘allIds’.

So, If you want to access ‘allIds’ in all the components or screens, you need to paste this code to get the state.

But in useSelector, we are reducing this entire code with just one line and this works the same way as mapStateToProps work, it rerenders the component when the state changes.

const todoIds = useSelector(state=>state.todos.allIds)
const todoTitle= useSelector(state=>state.todos.title)

You can see, we don’t need to write functions when hooks can do the trick.

mapDispatchToProps and useDispatch()

mapDispatchToProps is used to dispatch any action which can change the state of the store.

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' }),
  }
}
export const connect(mapDispatchToProps)(Component)

We can reduce this entire codebase to a couple of lines by introducing useDispatch Hook.

const dispatch = useDispatch();
const increment= data => dispatch({type:'INCREMENT",payload:data});
const decrement= data => dispatch({type:'DECREMENT",payload:data});
const reset= data => dispatch({type:'RESET",payload:data});

You can see that, we have reduced the codebase and made it clearer and cleaner using “Redux Hooks”