[英]useEffect is not triggered on redux store get updated
export default function Cart(props) {
const dispatch = useDispatch();
const branch = useSelector((state) => get(state, "vendor.currentBranch"));
const orderInput = useSelector((state) => get(state, "order.orderInputs"));
const [orderResult, setOrderResult] = useState(null);
let orderItemLength = orderInput.length
useEffect(() => {
let payload = {
branch_uuid: get(branch, "uuid"),
menu_items: orderInput,
};
dispatch(calculateOrder(payload))
.then((result) => {
setOrderResult(result);
})
.catch(() => {});
}, [orderInput]);
const deleteItem = (index) => {
remove(orderInput, (oi, i) => index === i);
dispatch({
type: ADD_ORDER_INPUT,
payload: orderInput,
});
};
return (
<div className={styles.cartbody} id="scrollstyle-4">
{map(get(orderResult, "orderItems", []), (oi, i) => {
return (
<div className={styles.cartProductBox}>
<div className={styles.productName}>
<p className={styles.textRed}>
<span className={styles.qunatity}>
{get(oi, "quantity")}
</span>
{get(oi, "item_name")}
<Popconfirm
placement="rightBottom"
title={"Are you sure you want to remove this item?"}
onConfirm={() => {
deleteItem(orderInput,i);
}}
okText="Yes"
cancelText="No"
>
<DeleteOutlined />
</Popconfirm>
</p>
<span className={styles.subItem}>
{map(get(oi, "orderItemAddons", []), (oia, i) => {
return `${i === 0 ? "" : ","} ${get(
oia,
"addon_type_name"
)} `;
})}
</span>
</div>
<div>
<div>
<span className={styles.qunatity}>
$ {round(get(oi, "item_amount"), 2)}
</span>
</div>
<div style={{ marginTop: 10 }}>
{get(oi, "orderItemAddons", []).length > 0 && (
<span className={styles.addonPrice}>
$ {round(get(oi, "addon_amount"), 2)}
</span>
)}
</div>
</div>
</div>
);
})}
</div>
);
}
這是我的減速器代碼
import {
ADD_SERVICE,
ADD_ORDER_INPUT,
ADD_CALCULATED_ORDER,
} from "../../constants/ActionTypes";
const orderReducer = (
state = { serviceType: null, orderInputs: [] },
action
) => {
switch (action.type) {
case ADD_SERVICE:
return { ...state, serviceType: action.payload };
case ADD_ORDER_INPUT:
return { ...state, orderInputs: action.payload };
case ADD_CALCULATED_ORDER:
return { ...state, orderInputs: action.payload };
default:
return { ...state };
}
};
export default orderReducer;
在上面的代碼中,當我從另一個組件添加訂單項時,useEffect 被觸發,但是當我刪除 orderItem 時(如您在deleteItem()
函數中所見),useEffect 沒有在我的 redux 商店被觸發更新,我的 useEffect 觸發器依賴項是OrderInput
變量如代碼所示。 我還嘗試將 useEffect 的依賴項設置為 order OrderInput
數組的長度
請幫助我知道我做錯了什么?
面對同樣的問題並得到解決,感謝 Chris Answer。
提供一些詳細說明,希望它可以幫助下一個人:
最初沒有工作,當 redux 存儲更改時,useEffect 沒有觸發。
// Redux: Subscribe to user Store
const userStateRedux = useSelector((state: RootState) =>state.user);
useEffect(() => {
console.log('hello',userStateRedux);
}, [userStateRedux]);
Redux 需要引用另一個 object 以檢測更改 state(在您的減速器中執行不可變更新)
In your reducer.js
//Mutable Update: Still referencing ur initial State
state.user=action.user;
state.token=action.token;
//Immutable Update: Referencing a new Object <- USE THIS
state={
user:action.user,
token:action.token
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.