React-Redux条件变量

Question

我正在为hours...hope的react-redux变量而苦苦挣扎，有人可以帮上忙。条件返回给我的是变量order.name没有定义，尽管在reducer和action中一切正常。当isLoading ===为true时，它将继续呈现{order.name}，我知道在这一点上没有定义它，因为它需要一些时间。当时我设置了Loader来做它的工作。所以我不清楚为什么他会继续渲染，尽管有一个条件不应该允许它...直到isLoading ===为false。

Here is console.log of orderDetails

import { getOrderDetailsAction } from "../actions/orderAction";

const OrderScreen = ({ match }) => {
  const orderId = match.params.id;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getOrderDetailsAction(orderId));
  }, [dispatch, orderId]);

  const orderDetails = useSelector((state) => state.orderDetails);
  const { order, isLoading } = orderDetails;

  return isLoading ? <Loader /> : <>{order.name}</>;
};

export default OrderScreen;

减速机

export const orderDetailsReducers = (
  state = { isLoading: true, orderItems: [], shippingAddress: {} },
  action
) => {
  switch (action.type) {
    case ORDER_DETAILS_REQUEST:
      return {
        ...state,
        isLoading: true,
      };
    case ORDER_DETAILS_SUCCESS:
      return {
        isLoading: false,
        order: action.payload,
      };
    case ORDER_DETAILS_FAILED:
      return {
        isLoading: false,
        error: action.payload,
      };
    default:
      return { state };
  }
};

动作

export const getOrderDetailsAction = (id) => async (dispatch, getState) => {
  try {
    dispatch({
      type: ORDER_DETAILS_REQUEST,
    });

    //Getting TOKEN
    const {
      userLogin: { userInfo },
    } = getState();

    //Passing TOKEN
    const config = {
      headers: {
        "auth-token": `${userInfo.token}`,
      },
    };
    const { data } = await axios.get(`/api/orders/${id}`, config);
    dispatch({
      type: ORDER_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: ORDER_DETAILS_FAILED,
      payload: error.response.data.msg,
    });
  }
};

Answer 1

检查redux操作，了解isLoading状态是如何从redux开发工具更改的

检查减速器名称-> state.orderDetails (这是否存在?) const orderDetails = useSelector((state) => state.orderDetails);

此外，我们可以纠正这一点

state = { isLoading: true, orderItems: [], shippingAddress: {}, order: {} }

// return entire state and not just isLoading and order
case ORDER_DETAILS_SUCCESS:
  return {
     ...state, <--------
    isLoading: false,
    order: action.payload,
  };
case ORDER_DETAILS_FAILED:
  return {
    ...state,  <---------
    isLoading: false,
    error: action.payload,
  };