Question

现在，我正在通过具有端点的数组映射到我的API。从那里开始，我要遍历每个链接，并针对所映射的每件事调用一个get请求。我的问题是我无法将所有内容保存到我的redux状态。我已经尝试过使用concat并推入所有内容，并将其全部放入我的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
  }
}

当我使用concat（减速器）时：

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

const initialState = {
  photo: []
}

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

    default:
      return state;
  }
}

export default photoReducer

当我使用推（减速器）时：

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

const initialState = {
  photo: []
}

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

    default:
      return state;
  }
}

export default photoReducer

更新（另一个问题）：

我能够使用它：

return {
        ...state,
        photo: [...state.photo, action.photo]
      }

现在的问题是，每次刷新时，都会再次推送相同的数据，因此一切都会成倍增加。有没有办法来解决这个问题？

Answer 1

您需要将 updatedState 而不是 initialState 合并到化简器中才能进行更新

使用 concat ：

return {
  ...state,
  photo: state.photo.concat([action.photo])
}

或使用点差运算符

return {
  ...state,
  photo: [...state.photo, action.photo]
}

Answer 2

push在redux中不能正常工作，理想的情况是使用散布运算符连接数组

return {
     ... state,
     photo: [... initialState.photo, action.photo]
}

Answer 3

如果action.photo是一个数组，则无需用其他[]包装它。

如果要将新获取的照片阵列与处于Redux状态的现有照片阵列合并，请使用state.photo.push而不是initialState.photo.push。

case GET_PHOTO:
      return {
        ...state,
        photo: state.photo.push(action.photo)
      }

Answer 4

数组上的Javascript push方法将为您返回数组的新大小，因此它将无法正常工作。

您需要使用concat或spread-syntax

case GET_PHOTO:
  return {
    ...state,
    photo: initialState.photo.concat([action.photo])
  }

或

case GET_PHOTO:
  return {
    ...state,
    photo: [...initialState.photo, action.photo]
  }

将数据推送到我的Redux状态

4 个答案: