不是每次都派发 thunk 动作

Question

我有一个发票卡列表，当用户点击一张卡时，它应该打开类似模态的内容，其中包含与该发票相关的数据，如图中所示。

问题是我有时会得到一个空白的模态框，来回点击它几次后我又得到了数据：

这是我通过 id 发送付款的操作：

export const getPayoutById = (id) => (dispatch) => {
  dispatch({ type: GET_PAYOUT_BY_ID_LOADING });
  paypalUrl
    .get(Constants.PAYOUT + `/${id}`, { headers })
    .then(({ data }) => {
      dispatch({ type: GET_PAYOUT_BY_ID, payload: { payout: data } });
    })
    .catch((error) => {
      console.error(error);
      dispatch({ type: GET_PAYOUT_BY_ID_ERROR, payload: { error } });
    });
};

这是一个减速器：

 case GET_PAYOUT_BY_ID_LOADING:
      return {
        ...state,
        loading: true,
      };
    case GET_PAYOUT_BY_ID:
      return {
        ...state,
        loading: false,
        payout: action.payload.payout,
      };
    case GET_PAYOUT_BY_ID_ERROR:
      return {
        ...state,
        loading: false,
        payout: {},
        error: action.payload.error,
      };

这是我要发送操作的组件：

const AllPayouts = ({ invoices, tabs }) => {
  const dispatch = useDispatch();
  const { payouts, payout, loading } = useSelector(
    (state) => state.payoutReducers
  );

  const [invoice, setInvoice] = useState(false);

  useEffect(() => {
    dispatch(getPayouts());
  }, []);


  const openInvoice = (e) => {
    e.preventDefault();
    dispatch(getPayoutById(e.target.id));
    setInvoice(true);
  };

  return (
    <>
    
      <PayoutList>
        {payouts?.length > 5 && (
          <div className='payout-pagination'>
            <Pagination
              classesChunk={classesChunk}
              totalItems={invoices.length}
              changePage={changePage}
            />
          </div>
        )}
        {loading && <Loader />}
        {!loading &&
          payouts &&
          payouts.map((invoice) => (
            <InvoiceCard
              id={invoice.id}
              key={invoice.id}
              startDate={moment(invoice.invoiceStartDate).format('MMM Do')}
              endDate={moment(invoice.payoutDate).format('MMM Do, YYYY')}
              classes={invoice.payoutItemDTOs.length}
              status={invoice.needsPay ? 'arrival' : 'paid'}
              openInvoice={openInvoice}
            />
          ))}
      </PayoutList>
      {payout!== undefined && (
        <Payment
          id={payout.id}
          open={invoice}
          payout={payout}
          loading={loading}
          onClose={() => setInvoice(false)}
        />
      )}
    </>
  );
};

Answer 1

Thunk 中间件:
使用 Thunk 调用 Dispatch 是异步的，然后当您打开模态时，有时会显示有时不会，因为数据可能尚未获取，正如您所说，因此您可以使用类似的东西，仅显示模态在异步操作完成后。

打开发票处理程序：

const openInvoice = async(e) => {
    e.preventDefault();
    await dispatch(getPayoutById(e.target.id));
    setInvoice(true);
  };

不要忘记为 actionCreator 添加异步，让异步分派给 return 承诺（隐式）：


export const getPayoutById = (id) => async(dispatch) => {
  ...}

Answer 2

我弄明白了为什么有时有效有时无效。这取决于我点击卡片的位置。

这是因为我设置了 id 和 e.target.id:

dispatch(getPayoutById(e.target.id));

并且包装 div 有它....所以当我点击一个标题时，价格例如它没有 id，也没有显示任何内容。 :

<h5 class="bold subtitles">Dec 2nd - Dec 16th, 2020</h5>

这就是为什么有时有效有时无效的原因。

我通过使用 e.currentTarget.id 而不是 e.target.id

设置 id 来修复它

dispatch(getPayoutById(e.currentTarget.id));

不是每次都派发 thunk 动作

Not dispatching thunk action every time

reactjs

redux-thunk

react-redux