useEffect is not triggered on redux store get updated - reactjs

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>
);
}
This is my reducer code
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;
In the above code when I add an order item from another component useEffect gets triggered but when I remove orderItem (as you can see in deleteItem() function) useEffect didn't get triggered on my redux store get updated, my useEffect trigger dependency is OrderInput variable as shown in code.
I also try to set dependency of useEffect to length of the array of order OrderInput
Please help me to know what I am doing wrong?

Answer 1

Faced the same problem & resolved thanks to Chris Answer.
Providing some elaboration, hopefully it helps the next guy:
was'nt working intially, useEffect was not trigger when redux store changed.
// Redux: Subscribe to user Store
const userStateRedux = useSelector((state: RootState) =>state.user);
useEffect(() => {
console.log('hello',userStateRedux);
}, [userStateRedux]);
Redux needs to reference another object to detect a change state
(perform an Immutable update in ur 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
};