将数据推送到我的 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
更新(另一个问题):
我能够让它工作:
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