Redux: ReactJS via HOC & Hooks

Redux as we know is the global state manager, which can be used with Javascript or Typescript.

We know the basic implementation behind the redux with – redux-vanilla-javascript

There’s an official React-Redux package by redux to implement it with ReactJS. The package is optimized to minimalize the component re-rendering, it only happens when data used by component changes.

Before React 16.8, only way of connecting React Component to Redux store is via High-order components (HOC)

connect() function connects a React component to a Redux store, it requires developer to define which data component needs from the store and which functions are available to dispatch actions to the store.

function MyComponent (props) {
    return <div onClick={()=>props.add(1)}></div>;
}
//this will connect state of store and send it to component as props
const mapStateToProps = (state) => {
    return {
        payload: state.isActive
    }
}
//this will connect dipatch actions of store and send it to component as props
const mapDispatchToProps = (dispatch) => {
    return {
        add: (payload) => {
            dispatch({type: "ADD", payload: payload})
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

After the introduction of functional components and hooks in React 16.8 it slowly become legacy method. Though connect() is still work and supported in React-Redux 8.x, but it’s recommended to use hooks.

React 16.8 was released in early 2019, introduced hooks: functions allowing to access state, lifecycle of component or separate some logic outside of component to be reusable like HOC for class components. With hooks, functional components can fully replace class components. They are easier to read and test. Currently there are no plans to remove classes from React, but more and more libraries  are using hooks by default.

Note: Hooks doesn’t work inside class component.

In React-Redux library, hooks were added in 7.1.0. It’s still necessary to wrap entire application in “Provider” component to use Redux Store context.

• “mapStateToProps” equivalent is “useSelector” hook.
• “mapDispatchToProps” equivalent is “useDispatch” hook
• “useStore” hook returns a reference to Redux store.

useSelector

Allows us to extract data from Redux Store state. useSelector has only one argument being state of Redux store. Each useSelector subscribes to Redux store and caches last returned value reducing number of re-rendering. Inside a componment useSelector ensures that the it re-renders only when the selected state value chnages. It doesn’t prevent the component from re-rendering when  it’s parent re-rendered, even when component’s props are same as before. To avoid it React.memo() can be used.

import React from 'react'
import { useSelector } from 'react-redux'

export const MyComponent = () => {
    const counter = useSelector((state) => state.counter);
    return <div>{counter}</div>;
}

useDispatch

Returns a reference to the dispatch function from the Redux Store. It may be used to dispatch actions as needed.

import React from 'react'
import { useDispatch } from 'react-redux'

export const MyComponent = ({ value }) => {
    const dispatch = useDispatch();
    return (
        <div>
            <span>{value}</span>
            <button onClick={()=>dispatch({type: "INCREMENT"})}>
                Increment Counter
            </button>
        </div>
    )
}