Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

useEffect updating because redux state changed

$
0
0

In my app I have multiple useEffect hooks and a redux global state. Now depending on the change of the redux state the useEffect hook should run when the variable changes, which it does. My dispatch and useEffect hooks look like this:

const dispatch = useDispatch();const fetchOrder = useCallback((uuid: string) => dispatch(thunkFetchOrder(uuid)), [dispatch]);const fetchDebtor = useCallback((uuid: string | undefined) => dispatch(thunkFetchDebtor(uuid)), [dispatch]);const fetchOrderPayments = useCallback((uuid: string) => dispatch(thunkFetchOrderPayments(uuid)), [dispatch]);const orderInState: any = useSelector((state: RootState) => state.order);const debtorInState: any = useSelector((state: RootState) => state.debtor);useEffect(() => { fetchOrder(props.route.params.orderUuid); }, []);useEffect(() => { setOrder(orderInState); }, [orderInState.order.uuid]);useEffect(() => { setDebtor(debtorInState.debtor); console.log('update') }, [debtorInState.debtor.id]);useEffect(() => { setOrderPayments(orderInState.payments); }, [orderInState.payments]);

For example the useEffect hook with setOrder(orderInState) should only run when orderInState.order.uuid changes. However, it runs multiple times. The reducer for the order API call looks like this:

 const initialState: OrderState = {    order: {        uuid: ''    },    payments: []}export function orderReducer(    state = initialState,    action: OrderActionTypes): OrderState{    switch(action.type) {        case FETCH_ORDER_REQUEST:            if (state.order.uuid!== action.uuid) {                return {                    ...state,                    order: {}                }            } else {                return {                    ...state                }            }        case FETCH_ORDER:            return {                ...state,                order: action.payload            }        case FETCH_ORDER_PAYMENTS:            return {                ...state,                payments: action.payload            }        default:            return state;    }}

My redux global state looks like this:

export const rootReducer = combineReducers({    auth: authReducer,    error: errorReducer,    debtor: debtorReducer,    debtors: debtorsReducer,    order: orderReducer,    orders: ordersReducer,    payments: paymentsReducer,    roles: rolesReducer,    users: usersReducer,    credentials: credentialsReducer})

What am I doing wrong here?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>