Хук useSelector возвращает пустой массив при перезагрузке страницы - PullRequest
Новая
       106

Хук useSelector возвращает пустой массив при перезагрузке страницы

0 голосов
/ 14 июля 2020

У меня есть следующий файл с маршрутом /properties/details/:id. 

function App():JSX.Element {
  return (
    <div className="app">
      <Router>  
          <div className="body-container">
             <Switch>
                <Route exact path={['/', '/home']} component={Home}  />
                //...
                <Route exact path="/properties/details/:id" component={PropertyDetails}/>
            </Switch>
          </div>              
      
      </Router>
    </div>
  );
}

export default App;

А вот компонент PropertyDetails 

import React from 'react';
import  { useDispatch, useSelector} from 'react-redux';
import { RootState } from '../../store/index';
import { Listing } from '../../store/listings/types';
import { Media } from '../../store/listings/types';

const PropertyDetails:React.FC<any> = (props):JSX.Element => {  
  const listings:Listing[] = useSelector<RootState, Listing[]>((state: RootState) => state.listings);
  const id = props.match.params.id;
  const filteredListings:Listing[] = listings.filter((item:Listing) => { 
    if (item.listingId) {
      return item.listingId === id;
    }
  });

  const listing:Listing = filteredListings[0] || { media: []};

  return (
    <div>
      <p>Country : {listing.country}</p>
      <div className="images">
        {       
            listing.media.map((item: Media, index) => { 
            return (<div className="image-container">
              <img key={index} src={item.MediaURL} /> 
            </div>)
            })
          }
      </div>
    </div>
  )
};

export default PropertyDetails;

Я могу перейти к указанному выше компоненту из следующий компонент PropertyList с компонентом Link из react-router-dom

import React from 'react';
import PropertyItem from '../PropertyItem/PropertyItem';
import { Link } from 'react-router-dom';
import Card from '../Card/Card';
import './PropertyList.scss';

const PropertyList:React.FC<any> = ({ listings }):JSX.Element => { 
  return (
    <div className="property-list">
      {listings.map((item:any) => (        
        <Link to={`/properties/${item.listingId}`}>
            <Card >
              <PropertyItem key={item.listingId} { ...item}/>
            </Card>
        </Link>        
      ))}
    </div>
  );
};

export default PropertyList;

Это мой файл действия 

import { Listing, ListingActionTypes, ListingAction } from './types';
import axios from 'axios';

export function fetchListings(listings: Listing[]): ListingAction {
  return {
    type: ListingActionTypes.FETCH_ALL_LISTINGS,
    payload: listings,
  }
}

const axiosInstance = axios.create({
  baseURL: `https://api.example.com`,
});

export function fetchListingsData() {
  const url = `/listings?access_token=${process.env.REACT_APP_API_KEY}`;

  return async (dispatch: { (arg0: ListingAction):void }) => {
    try {
      const res = await axiosInstance({
        method: 'get',
        url: url,
      });

      const data = transformResponse(res);      
      dispatch(fetchListings([...data]));
    } catch(error) {
      console.log(error); //TODO: handle error
    }
    return 'done';
  };
}

const transformResponse = (res: any):Listing[] => {
  if (res && res.data && res.data.bundle) {
    return res.data.bundle.map((item: any) => {
      const weather = {
        //...
        country: item.Country,        
      };
      return weather;
    });
  } else {
    return [];
  }
};

И вот мой редуктор 

import {
  Listing,
  ListingActionTypes,
  ListingAction,
} from './types';


const initialState:Listing[] = [];

export const listings = (state=initialState, action: ListingAction): Listing[] => {
  switch(action.type) {
    case ListingActionTypes.FETCH_ALL_LISTINGS:
      if (action.payload) {
        state = [...action.payload];
        return state;
      } else {
        state = [];
        return state;
      }
      
    default:
      return state;
  }
}

Используя ссылку, я могу успешно загрузить содержание деталей. Но когда я обновляю sh страницу, содержимое исчезает. Хук useSelector возвращает пустой массив. Я не уверен, почему это происходит. Может кто поможет?

1 Ответ

0 голосов
/ 14 июля 2020

Я не понимаю, куда вы звоните fetchListingsData(). Я предполагаю, что вы вызываете его в компоненте PropertyList. Вам необходимо убедиться, что вы вызываете эту функцию в компоненте PropertyDetails, если у вас нет доступных данных.

Когда вы обновляете sh страницу, все данные в памяти теряются и вам необходимо позвонить еще раз, чтобы получить данные.

...