CODEWITHSUNDEEP
reactjsreact-reduxreact-hooks
Sajal Shrestha
Sajal Shrestha

Reputation: 554

What is the main difference between using React-Redux Hooks and React-Redux Connect()?

I am about to start a project with React-Redux. For the APIs references there are Hooks and connect(). Since, Hooks are the alternate of connect APIs. What is the difference of using hooks or connect to my React-Redux project.

Upvotes: 25

Views: 16754

Answers (4)

winwiz1
winwiz1

Reputation: 3164

What is the difference between using hooks and connect to my React-Redux project

There are two major differences:

  • Scope
    connect can be used with both React class components and function components whereas hooks can be used with function components only.

  • Performance vs simplicity
    Using hooks is simpler. The simplicity comes at a price: you have less performance tweaks at your disposal in comparison with connect. Which is more complex: you call it passing in configuration options (few or many) and get back the 'configured flavor' of connect. This flavor is the HOC that you call passing in your component to get it back wrapped.

    One of the main configuration options is the already mentioned mapStateToProps function. You don't have to use it but it most cases you will. There are 4 other functions that exist solely to give you various opportunities to improve the performance of the component you are going to wrap around using connect. The functions are called:
    areStatesEqual
    areStatePropsEqual
    areOwnPropsEqual
    areMergedPropsEqual

    All 4 are optional. You can pass in as the connect configuration options either none or some or all of them and tweak the performance. It's worth noting that even if you pass in none, then the default implementations of those functions (which are effectively performance helpers) will apply and as a result, you will get the wrapped component that is more optimised performance-wise than its hooks-using counterpart.

Upvotes: 18

trixn
trixn

Reputation: 16309

React-Redux internally uses React Context to connect components to the store.

The connect() function wraps your component into another component that connects to the store context and forwards the selected state to your component as props.

If you called...

const YourConnectedComponent = connect(mapStateToProps)(YourComponent)`

...you can imagine the wrapper to roughly look like this:

const YourConnectedComponent = props => (
    <StoreContext.Consumer>
        {state => <YourComponent {...props} {...mapStateToProps(state, props)} />}
    </StoreContext.Consumer>
);

mapStateToProps in this case would be the function you provided to connect(). This is very simplified and it doesn't actually look exactly like this for various performance reasons but it is suitable to demonstrate the general concept.

The useSelector hook also consumes the store context but without creating a component in between for that. It directly returns the selected state for the component to use it. It internally uses useContext which is "the hooks way" to consume a context.

useDispatch just exposes dispatch() to your component for it to dispatch actions with it.

Technically the outcome is more or less the same whether you are using hooks or connect().

Upvotes: 11

Dupocas
Dupocas

Reputation: 21297

connect is a High Order Component whose job is to provide a way to connect Redux's store to your components. useSelector and useDispatch are the equivalent hooks. Just another technique to do the same thing.

class Component extends React.Component{
    componentDidMount(){
        const { fetchApi, arg } = this.props
        fetchApi(arg)
    }
}
const mapDispatchToProps = dispatch =>({
    fetchApi : arg => dispatch(fetchApi(arg))
})
const mapStateToProps = state =>({
    arg : state.arg
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

Now the equivalent using hooks

const Component = () =>{
    const dispatch = useDispatch()
    const arg = useSelector(state => state.arg)

    useEffect(() =>{
       dispatch(fetchApi(arg))
    },[dispatch, arg])
}

Both do exactly the same thing, it's only a different approach to connect redux to components internal state. Both consume Redux's context to expose dispatch and state inside a given component

Upvotes: 13

Sumanth Madishetty
Sumanth Madishetty

Reputation: 3605

Hooks enable you to access dispatch and redux-state directly with out connecting the component using connect and hooks can be used only in functional components

Connect enables us to link our component(Class or functional ) with redux-store,

You can refer to react-redux hooks documentation from this link.

It has given different hooks like

useSelector using which we can access redux store useDispatch returns dispatch function with which we can dispatch redux actions

Sample usage of redux hooks for a component will be(Can use this only in functional Components)

functions Test() {
const dispatch = useDispatch()
const count = useSelector(state => state.counter)
// If you want to dispatch a redux action using hooks then
// Assume a redux action called increaseCounter

return (
<>
<p>{count}</p>
<button onClick={() => {dispatch(increaseCounter(count + 1))}}>
ClickMe!
</button></>)
}

If you want to achieve the same using connect then(you can use this in Class or functional components)

function Test() {
  return (
    <>
      <p>{this.props.count}</p>
      <button onClick={() => {this.props.increaseCounter(this.props.count+1)}}>Click Me!</button>
    </>
  );
}

const mapStateToProps = state => {
  return {
    count: state.counter
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ increaseCounter }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Test)

Upvotes: 4

Related Questions