在我的Angular2应用程序中,我使用ngrx来管理状态,所以当我从服务器接收数据时,我会将一个动作发送给reducer。
MyExampleReducer.ts:
export const Reviews: ActionReducer<any> = (state: any[] = [], action: Action) => {
switch (action.type) {
case GET_REVIEWS:
return action.payload;
case ADD_REVIEW :
return [...state, {review : action.payload, replays : []}];
case UPDATE_REVIEW:
return '' // return what ?
case DELETE_REVIEW:
return state.filter(item => {
return item.id !== action.payload.id;
});
default:
return state;
}
};
问题是当我必须更新我的评论数组中的项目时,以redux方式执行的最佳方法是什么?
答案 0 :(得分:2)
假设您的州只是一个充满评论的数组,您可以执行以下操作:
export const Reviews: ActionReducer<any> = (state: any[] = [], action: Action) => {
switch (action.type) {
case GET_REVIEWS:
return action.payload;
case ADD_REVIEW :
return [...state, {review : action.payload, replays : []}];
case UPDATE_REVIEW:
// get an array of all ids and find the index of the required review
let index = state.map(review => review.id)
.indexOf(action.payload.id);
return [
...state.slice(0, index),
Object.assign({}, state[index], action.payload),
...state.slice(index + 1)
]
case DELETE_REVIEW:
return state.filter(item => {
return item.id !== action.payload.id;
});
default:
return state;
}
首先,您需要找到应更新的评论索引。之后,您可以创建一个新数组,在该数组中替换索引位置的对象。
这种突变的一个很好的资源是video。
答案 1 :(得分:2)
您可以使用map
返回一个数组,该数组的元素与更新的操作相对应:
export const Reviews: ActionReducer<any> = (state: any[] = [], action: Action) => {
switch (action.type) {
case ADD_REVIEW:
return [...state, { review: action.payload, replays: [] }];
case UPDATE_REVIEW:
return state.map(item => item.id === action.payload.id ? { review: action.payload, replays: [] } : item);
case DELETE_REVIEW:
return state.filter(item => item.id !== action.payload.id);
default:
return state;
}
}
此外,您可以使用评论缩减程序来执行ADD_REVIEW
和UPDATE_REVIEW
操作来简化评论减少程序 - 评论缩减程序仅涉及管理评论列表而不是评论本身:
import { reviewReducer } from '...';
export const Reviews: ActionReducer<any> = (state: any[] = [], action: Action) => {
switch (action.type) {
case ADD_REVIEW:
return [...state, reviewReducer(undefined, action)];
case UPDATE_REVIEW:
return state.map(item => item.id === action.payload.id ? reviewReducer(item, action) : item);
case DELETE_REVIEW:
return state.filter(item => item.id !== action.payload.id);
default:
return state;
}
}