React Native Redux防止在2分鍾內重復執行兩次操作

Question

我正在開發React Native Redux應用程序，卻遇到了一個問題，我在努力尋找最干凈，最有效的解決方案。

我有一個減速器，它管理這樣的模態：

import {
  OPEN_CHORDS_MODAL,
  CLOSE_CHORDS_MODAL
} from '../actions/types';

const INITIAL_STATE = {
  chordsModalIsOpen: false
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case OPEN_CHORDS_MODAL:
      return { chordsModalIsOpen: action.payload };
    case CLOSE_CHORDS_MODAL:
      return { chordsModalIsOpen: action.payload };
    default:
      return state;
  }
};

然后，我對模態執行以下操作：

import { FacebookAds } from 'expo';

import {
  OPEN_CHORDS_MODAL,
  CLOSE_CHORDS_MODAL
} from './types';

export const openChordsModal = () => ({
  type: OPEN_CHORDS_MODAL,
  payload: true
});

export const closeChordsModal = () => {
  FacebookAds.InterstitialAdManager.showAd('328225604270934_328677554225739')
    .then(console.log('Intestitial Ad shown'))
    .catch(err => console.log('Interstitial Ad Error', err));
  return { type: CLOSE_CHORDS_MODAL, payload: false };
};

基本上我正在看closeChordsModal動作。

我目前有一個插頁式廣告，每次關閉模式時都會顯示。 效果很好，但我想通過限制插頁式廣告的彈出次數來改善用戶體驗。

我想確保一旦廣告首次展示，至少再過2分鍾就不會再次展示。

即，用戶打開和關閉模式，廣告就會顯示（當前正在發生什么）。 然后，如果距離上一次關閉模態操作已經不到2分鍾，則用戶再次打開並關閉模態，只需關閉模態，否則關閉模態並顯示插頁式廣告。

我該怎么做？ 非常感謝！

Answer 1

由於解決方案涉及Date來等待2分鍾，因此我們無法在化簡器中這樣做，因為化簡器必須是純正的，沒有副作用或外部依賴性（是的，時間是外部依賴性）。

在執行操作時，每次調用closeChordsModal都會節省當前時間+ 2分鍾。

const doNotShowAnythingUntil = new Date(new Date().getTime() + 2*60*1000);

然后每次您再次調用該操作時，您都會檢查

if( new Date() < doNotShowAnythingUntil ) { do nothing }

這樣，您的減速器仍然是純凈的，並且動作在照料行為。

代碼示例：

import ...
import ...

export ...

let expirationDate;

export const closeChordsModal = () => {
    if(!expirationDate 
       || new Date() > expirationDate
    ) {
        expirationDate = new Date(
            new Date().getTime() + 2*60*1000
        );
        FacebookAds.InterstitialAdManager.showAd....
    }
}

Answer 2

React Native 實現了瀏覽器計時器。 也許您可以嘗試這樣的事情：

export class ModalContainer extends Component {
  state = {
    blockAds: false,
  };

  enableAds() {
    setTimeout(
      () =>
        this.setState({
          blockAds: false,
        }),
      , 120000
    );
  }

  displayFacebookAds = () => {
    if(!this.state.blockAds) {
      *Your code to dispatch FacebookAd action*
      this.setState({ blockAds: true });
      this.enableAds();
    }
  }
}