reactjs - useEffect 更新，因为 redux 状态发生了变化

Question

在我的应用程序中，我有多个 useEffect 挂钩和一个 redux 全局状态。现在根据 redux 状态的变化，useEffect 钩子应该在变量变化时运行，它确实如此。我的 dispatch 和 useEffect 钩子看起来像这样：

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]);

例如，带有 setOrder(orderInState) 的 useEffect 钩子应该只在 orderInState.order.uuid 更改时运行。但是，它会运行多次。订单 API 调用的 reducer 如下所示：

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

我的 redux 全局状态如下所示：

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

我在这里做错了什么？

标签： reactjstypescriptreact-nativeredux