соединение Axios с React Redux

Имеется страница, на которой с помощью axios отображаются 6 картинок, при клике на которые, они открываются в полный экран, имеется задача повесить на эту страницу React-Redux,я перечитал уже всю документацию, но так и не понял, что нужно сделать, подскажите, пожалуйста, или наведите на мысль, спасибо! вот сам компонент :

import React from "react";
import axios from "axios";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import "../Pages/PortfolioStyle.scss";
import Modal from "react-bootstrap/Modal";
import Image from "react-bootstrap/Image";



export default class Portfolio extends React.Component {
  state = {
    persons: [],
    show: false,
    close: false,
  };
  handleShowDialog = (id) => {
    this.setState({ ...this.state, selected: id, show: true });
    console.log("cliked");
  };
  handleHideDialog = () => {
    this.setState({ ...this.state, show: false });
    console.log("closed");
  };
  componentDidMount() {
    axios.get("http://localhost:3000/persons.json").then((res) => {
      const persons = res.data;
      this.setState({ persons });
    });
  }
  render() {
    return (
      <div className="container">
        <div className="row justify-content-center">
          {this.state.persons.map((person) => (
            <Card key={person.id} className="col-3 axios-items">
              <CardActionArea>
                <CardMedia
                  component="img"
                  alt={person.alt}
                  height="140"
                  image={person.src}
                  title={person.title}
                  onClick={() => {
                    this.handleShowDialog(person.id);
                  }}
                />
                {this.state.show && this.state.selected === person.id && (
                  <Modal
                    show={this.state.show}
                    animation={true}
                    style={{ position: "absolute" }}
                    open
                    onClick={this.handleHideDialog}
                  >
                    <Modal.Body>
                      <Image
                        className="image"
                        src={person.src}
                        onClick={this.handleShowDialog}
                        alt="Img"
                        style={{ width: "100%", height: "100%" }}
                      />
                    </Modal.Body>
                  </Modal>
                )}
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {person.title}
                  </Typography>
                  <Typography
                    variant="body2"
                    color="textSecondary"
                    component="p"
                  >
                    {person.desc}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          ))}
        </div>
      </div>
    );
  }
}

вот это Reducer :

import { FETCH_PORTFOLIO } from '../actions/index';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_PORTFOLIO:
    console.log(action)
      return [ action.payload.data, ...state ]
    }
   return state;
  }

вот это ActionCreator :

import '../WebAPIUtil.js';

export const FETCH_PORTFOLIO = "FETCH_PORTFOLIO";
export function getAllFlights(request) {
  console.log(request);
  return {
    type: FETCH_PORTFOLIO,
    payload: request,
  };
}

и файл с axios Get

import axios from 'axios';



axios.get("http://localhost:3000/persons.json")
  .then(function(result){ 
    YourAction.getAllFlights(result)
  });