每个GET请求都会重复Redux状态

Question

我正在通过一个数组进行映射，在该数组中我要获取数组中的每个项目并在每个项目上调用GET请求。然后，我将它们在redux状态下一起推送。问题是每次我重新加载信息都会重复一次。我认为解决此问题的方法是在每次运行请求时清除我的redux存储，但是，我不想擦除所有内容，在这种情况下只是擦掉照片部分。

momentcontent.js：

 componentDidMount () {

      this.props.photos.map(photo => {
        this.props.fetchPhoto(this.props.token, photo)}
      )
    }

index.js（操作）：

export const fetchPhoto = (token, photo) => dispatch => {
  console.log('right token')
  console.log(token);
  fetch(photo, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Token ${token}`,
    }
  })
  .then(res => res.json())
  .then(parsedRes => {
    console.log('photo data')
    console.log(parsedRes)
    dispatch(getPhoto(parsedRes))
  })
}

export const getPhoto = (photo) => {
  console.log('RES')
  console.log(photo)
  return {
    type: GET_PHOTO,
    photo: photo
  }
}

photo.js：

import {
  GET_PHOTO
} from '../actions';

const initialState = {
  photo: []
}

const photoReducer = (state = initialState, action) => {
  switch(action.type) {
    case GET_PHOTO:
      return {
        ...state,
        photo: [...state.photo, action.photo]
      }

    default:
      return state;
  }
}

export default photoReducer

我的控制台（阵列中应该有9个项目，这里有27个项目）：

Answer 1

您可以清除照片是否已存在于商店中，而不是清除redux存储区photos对象并重新添加。

假设您的状态包含照片数组，则操作包含照片对象，并且照片（图像URL实例）是唯一的对象< / p>

因此，您可以将减速器修改为

case GET_PHOTO:
 return state.photo.some(( { photo } ) => photo === action.photo.photo)
         ? state
         : [...state.photo, action.photo];