redux saga操作如何延迟存储数据更新？

Question

Can't delay action firing (initialize from redux-form) to store data update after fetching.

1. Store is initializing with empty account object.
2. At initial render getAccount action firing and triggering update of store.
3. useEffect see store updating and triggering getAccount action second time
4. second data request
5. END

  const {getAccount, initialize} = props
  prepareData = () => {...prepared obj}

  useEffect(() => {
    const begin = async () => {
      await getAccount();
      await initialize(prepareData());
    };
    begin();
  }, [account.id]);

main aim to avoid unnecessary second request

Answer 1

What if you put a conditional on the begin call?

 const {getAccount, initialize} = props
 const {begun, setBegun} = useState(false)
  prepareData = () => {...prepared obj}

  useEffect(() => {
    const begin = async () => {
      await setBegun(true);
      await getAccount();
      await initialize(prepareData());
    };

    begun || begin();
  }, [account.id]);

Answer 2

Should getAccount be called if account.id doesn't exist? If not then simply check that account.id exists before calling begin.

  const {getAccount, initialize} = props
  prepareData = () => {...prepared obj}

  useEffect(() => {
    // add a guard condition to exit early if account.id doesn't exist yet
    if (!account.id) {
      return;
    }
    const begin = async () => {
      await getAccount();
      await initialize(prepareData());
    };
    begin();
  }, [account.id]);