Действие Redux не получает данные из API (JSON)

Question

Использование React + Redux + Django Rest Framework в моем проекте, и я застрял. Я пытаюсь получить данные из API (DRF JSON) через действие приставки с запросом Axios внутри. У меня есть список объявлений и рекламы.

Для первого рендера он дает мне ответ с данными, но когда я возвращаюсь и выбираю другое объявление из списка, оно не отображается (нет selectedAdvert [empty array] Действие не работает). Выбранная реклама отображается только после перезагрузки страницы. Можете ли вы помочь мне заставить его работать должным образом? Вот мой код ...

действия / index.js

export function getAdvert() {
  return function(dispatch) {
    axios.get('/api/adverts/')
        .then(response => dispatch({
                type: GET_ADVERTS,
                payload: response.data
            })
        );
  }

export function getSelectedAdvert(id) {
   return function(dispatch) {
    axios.get(`/api/adverts/${id}/`)
        .then(response => dispatch({
            type: GET_SELECTED_ADVERT,
            payload: response.data
        }));
   }
}

export function clearSelectedAdvert() {
  return {
    type: CLEAR_SELECTED_ADVERT,
    payload: []
  }

advert_reducer.js

import {
  GET_SELECTED_ADVERT,
  CLEAR_SELECTED_ADVERT,
  GET_ADVERTS
} from '../actions/types';

export default function(state = {}, action) {
  switch(action.type) {
    case GET_ADVERTS:
        return {
            ...state, advert: action.payload
        };
    case GET_SELECTED_ADVERT:
        return {
            ...state, selectedAdvert: action.payload
        };
    case CLEAR_SELECTED_ADVERT:
        return {
            ...state, selectedAdvert: action.payload
        };
    default:
        return state;
   }
}

advert.js

import { getSelectedAdvert, clearSelectedAdvert } from '../actions';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';

class Advert extends React.Component {
constructor(props) {
  super(props);
}

componentDidMount() {
    this.props.getSelectedAdvert(this.props.match.params.id);
}

componentWillUnmount() {
    this.props.clearSelectedAdvert();
}

renderAdvert = ({selectedAdvert}) => {
    console.log(selectedAdvert);
      if(selectedAdvert) {
            return (
                <div className="advert mi-5" key={selectedAdvert.id}>
                    <div className="advert__main">
                        <div className="advert__photo">
                            <div className="lightbox__image">
                                <img width="100%" src={selectedAdvert.images[0]}/>
                            </div>
                        </div>

                        <div className="advert__order">
                            <h4>{selectedAdvert.title}</h4>
                            <hr/>
                            <div>
                                <p>{selectedAdvert.price}</p>
                            </div>
                            <button>
                                Order
                            </button>
                        </div>
                    </div>
                </div>
            )
    }
};

render() {
    return (
        <div className="container">
            <div className="row">
                {this.renderAdvert(this.props.advert)}
            </div>
        </div>
    );
  }
}

function mapStateToProps(state) {
   return {
      advert: state.advert
   }
}

function mapDispatchToProps(dispatch) {
   return bindActionCreators({getSelectedAdvert, clearSelectedAdvert}, 
   dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Advert));

продукты JS

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { getAdvert, clearSelectedAdvert } from "../actions/index";
import Card from "../components/app/Card";

class Products extends React.Component {
  componentDidMount() {
      this.props.getAdvert();
  }

renderProducts = ({advert}) => {
    if(advert) {
        return advert.map(product => {
            return (
                <Card key={product.id} advertItem={product}/>
            )
        })
    }
};

 render() {
    return (
         <div className="product__card-box">
             {this.renderProducts(this.props.advert)}
         </div>
 )}

function mapStateToProps(state) {
console.log(state);
   return {
      advert: state.advert
   }
}

function mapDispatchToProps(dispatch) {
   return bindActionCreators({ getAdvert, clearSelectedAdvert }, dispatch)
}


export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Products));

Card.js

const Card = ({advertItem}) => {
return (
    <div key={advertItem.id}>
        <div>
            <img src={advertItem.images[0]} alt={advertItem.title}/>
            <div>{advertItem.price}</div>
        </div>

        <div>
            <div>{advertItem.title}</div>
            <div>
                <Link className="btn order__btn" to={`/advert/${advertItem.id}/`}>More</Link>
            </div>
        </div>
    </div>
  )
};

export default Card;