使用 redux 根据当前值更新对象数组中的单个对象 属性
Update a single object property in an array of objects based on the current value with redux
在我的状态下,我有一组对象,这些对象具有一些描述性属性、数量和唯一 ID。此对象中的数据来自 API 响应,在我的动作创建者中,我检查状态以查看它是否已经存在,如果存在,则为我的减速器分派一个增量动作。这是我的动作创建者的样子:
export const getProductDetails = upc => (dispatch, getState) => {
const state = getState();
const products = state.table.products;
if (_find(products, upc) !== undefined) {
dispatch({ type: INCREMENT_QUANTITY, payload: upc });
} else {
axios
.post(<--POST TO ENDPOINT-->) }
})
.then(res => {
dispatch({ type: POST_UPC, payload: res.data });
})
.catch(err => {
errorHandler(dispatch, err.response, AUTH_ERROR);
});
}
};
我在这个案例中的减速器结构如下:
case INCREMENT_QUANTITY:
return {
...state,
products: state.products.map(product => {
action.payload === product.upc
? { ...product, quantity: product.quantity + 1 }
: product;
})
};
我基于这个reducer逻辑
,但由于某种原因,在调度操作时,重复的产品被覆盖为 null
,而不是按预期增加数量。我现在还在尝试学习 redux,所以请原谅我的无知。理想情况下,我想避免引入一个库或包只是为了增加一个值。我的减速器到底缺少什么?
你没有在你的 map
回调中 returning 任何东西,你正在创建一个块,因此你没有得到预期的结果。相反,省略括号 { … }
:
products: state.products.map(product =>
action.payload === product.upc
? { ...product, quantity: product.quantity + 1 }
: product;
);
这将使用箭头函数语法隐式地return三元运算符的结果。
在我的状态下,我有一组对象,这些对象具有一些描述性属性、数量和唯一 ID。此对象中的数据来自 API 响应,在我的动作创建者中,我检查状态以查看它是否已经存在,如果存在,则为我的减速器分派一个增量动作。这是我的动作创建者的样子:
export const getProductDetails = upc => (dispatch, getState) => {
const state = getState();
const products = state.table.products;
if (_find(products, upc) !== undefined) {
dispatch({ type: INCREMENT_QUANTITY, payload: upc });
} else {
axios
.post(<--POST TO ENDPOINT-->) }
})
.then(res => {
dispatch({ type: POST_UPC, payload: res.data });
})
.catch(err => {
errorHandler(dispatch, err.response, AUTH_ERROR);
});
}
};
我在这个案例中的减速器结构如下:
case INCREMENT_QUANTITY:
return {
...state,
products: state.products.map(product => {
action.payload === product.upc
? { ...product, quantity: product.quantity + 1 }
: product;
})
};
我基于这个reducer逻辑
null
,而不是按预期增加数量。我现在还在尝试学习 redux,所以请原谅我的无知。理想情况下,我想避免引入一个库或包只是为了增加一个值。我的减速器到底缺少什么?
你没有在你的 map
回调中 returning 任何东西,你正在创建一个块,因此你没有得到预期的结果。相反,省略括号 { … }
:
products: state.products.map(product =>
action.payload === product.upc
? { ...product, quantity: product.quantity + 1 }
: product;
);
这将使用箭头函数语法隐式地return三元运算符的结果。