Manage state with React Hooks

React Hooks enable you to use state, execute effects, and other React features without writing a class. You can use hooks to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect().

For example:

class SampleContainer extends Component {

    componentDidMount() {
        //Initializations
        //Calling Action
        this.props.sampleAction();
    }

    ...

    render() {
        //Calling selector
        const selectorValue = this.props.sampleSelector();

        return <>Component body</>;
    }

    ...

}

// We need to implement this function to have access to the `dispatch` object
const mapDispatchToprops = dispatch => ({
    // Call actions using the dispatch object
    sampleAction: () => SampleModuleActions.actionName(dispatch);
})

// We need to implement this function to have access to the `state` object
const mapStateToProps = state => ({
    // Call selectors using the state object
    sampleSelector : () => SampleModuleSelectors.selectorName(state);
})

// To do the wiring with redux, we need to  use the `connect` HOC passing the two functions: `mapStateToProps` and `mapDispatchToProps`
export connect(mapStateToProps, mapDispatchToProps)(SampleContainer);

To do the same with hooks:

• You don't use class components.
• You don't need to use connect, mapStateToProps or mapDispatchToProps.
• Use useDispatch to get the dispatch objects and call the actions.
• Use useSelector to get the state object and call the selectors.
• Use useEffect to simulate the life cycle events, for example componentDidMount

For example:

const SampleComponent  = props => {
    //Get the dispatch object to call actions
    const dispatch = useDispatch();

    // Initializations - The same as componentDidMount
    useEffect(() => {
        //Calling action
        SampleActions.actionName(dispatch);
    } , [])

    
    //To call the selectors you do:
    const selectorValue = useSelector(state => SampleSelectors.selectorName(state));

    return (<>Component body<>);

}

In addition to the reduced code, you can create custom hooks to further reduce the amount of code.