开发者问题收集

将数据推送到我的 Redux 状态

2018-08-10
6694

现在,我正在将一个带有端点的数组映射到我的 API。从那里,我获取每个链接,并对我映射的每个事物调用 get 请求。我的问题是我无法将所有内容保存到我的 redux 状态中。我曾尝试使用 concat 和 push 将所有内容放在 redux 状态下的一个数组中。

MomentContent.js:

componentDidMount () {

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

index.js (actions):

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 (reducer) 时:

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

在此处输入图片说明

当我使用 push (reducer) 时:

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

输入图片描述在这里” src=

更新(另一个问题):

我能够让它工作:

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

现在的问题是每次我刷新时,相同的数据都会再次被推送,所以一切都会成倍增加。有办法解决这个问题吗?

3个回答

您需要将 updatedState 而不是 initialState 合并到 Reducer 才能更新

使用 concat :

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

使用扩展运算符

return {
  ...state,
  photo: [...state.photo, action.photo]
}
Pritish Vaidya
2018-08-10

在 redux 中推送无法正常工作,理想的做法是使用扩展运算符来连接数组

return {
     ... state,
     photo: [... initialState.photo, action.photo]
}
Henrique Viana
2018-08-10

如果 action.photo 是一个数组,则无需用额外的 [] 包装它。

如果您希望将新获取的照片数组与 Redux 状态中的现有照片数组相结合,请使用 state.photo.push 而不是 initialState.photo.push

case GET_PHOTO:
      return {
        ...state,
        photo: state.photo.push(action.photo)
      }
Andrew Lam
2018-08-10