useEffect在redux store get update时不触发

Question

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的依赖关系设置为顺序OrderInput数组的长度

请帮助我知道我做错了什么?

Answer 1

面临同样的问题&

提供一些详细说明，希望能帮助下一个人:

一开始不工作，当redux存储改变时，useEffect没有被触发。

// Redux: Subscribe to user Store
const userStateRedux = useSelector((state: RootState) =>state.user);
useEffect(() => {
console.log('hello',userStateRedux);
}, [userStateRedux]);

Redux需要引用另一个对象来检测更改状态(在reducer中执行不可变更新)

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
};