Redux Quick Start Guide

Higher-order functions

Now, let's look at one the most common scenarios. Suppose that we have a container component called AlertContainer that connects with React components using the connect function. This should not appear alien to you by now:

import React, { Component } from "react";import { connect } from "react-redux";import Alerts from "./Alerts";class AlertContainer extends Component { componentDidMount() {   this.props.dispatch({ type: "REQUEST_ALERTS_LISTS" }); } render() {   return <Alerts />; }}export default connect()(AlertContainer);

We have simply used the connect function from react-redux to connect a React component. The Alert components can be as simple as the following:

import React from "react";const Alerts = () => ( <ul> ...