Should I still use connect() function? #React.js

With a small read, Help me to decide that…

Let´s review it just a little.

I will start writing just a few lines of code.

import React from "react";
import { addTodo, deleteTodo } from './actions’

const TodoApp = (addTodo, deleteTodo, todos) => (
//A fantastic code...
);

function mapStateToProps(state) {
  return { todos: state.todos }
}

const mapDispatchToProps = {
  addTodo,
  deleteTodo
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoApp);

Let's recap!

The connect() (Higher-Order Component) function connects a React component to a Redux store.
This function provides its connected component with the data that I need from the store, and the functions that I need to use to dispatch actions to the store.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

On connect function we have mapStateToProps and mapDispatchToProps props.

The mapStateToProps and mapDispatchToProps deals with your Redux stores.
For more information about connect read the official documentation.

• Ok, so you don't want to write a function Connect, how do you think to replace mapStateToProps and mapDispatchToProps ?

• mmmm, let me think just a little more.

How do I think to replace that?

If I don't write this connect you need to still receiving props from the state and I want to still dispatch functions, how can I still using this?

Hooks it`s the answer!

• Oh buddy, what that means?

Hooks

The ability to handle a component's state and side effects is now a common pattern in a functional component.
The react-redux library now has support for Hooks in React and React Native apps that make use of Redux as the state management library.
React Redux offers a set of Hook APIs as an alternative to the omnipresent connect().

Let's use these hooks!

*using useSelector

useSelector is The equivalent of map state to props. It takes in a function argument that returns the part of the state that you need.

*using useDispatch

useDispatch is The equivalent of map dispatch to props. We will invoke useDispatch and store it to a variable, dispatch. Dispatch will work with the all actions imported from the actions folder.

Let's rewrite our code!

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodo, deleteTodo } from './actions’

export const TodoApp = () => {

const todos = useSelector(state => state.todos);
const dispatch = useDispatch();

return (
//a fantastic code that dispatch actions
(example: dispatch(addTodo()))
);
};

Conclusion:

• The main benefit of using the Redux Hooks is that they are conceptually simpler than wrapping components in the connect higher-order component.

• Another benefit of not using the higher-order component is that you no longer get what I call “Virtual DOM of death” (will be my next article).

• With connect, you are wrapping your component and injecting props into it. While the Redux Hooks have many benefits, there is one benefit of using connect instead of the Redux Hooks, and that is that it keeps your component decoupled from Redux

Tell me in the comments what do you think about that, and what do you suggest to me to still using connect function?.

Reference.

https://es.wikipedia.org/wiki/Steve_Jobs
https://react-redux.js.org/api/connect
https://react-redux.js.org/api/hooks