javascript - React Native Redux 防止操作在 2 分钟内重复两次

Question

我正在开发一个 React Native Redux 应用程序，但遇到了一个问题，我正在努力找出最干净、最有效的解决方案。

我有一个像这样管理模态的 reducer :

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 分钟，所以我们不能在 reducer 中这样做，因为 reducer 必须是纯粹的，没有副作用或外部依赖(是的，时间是外部依赖)。

在您的操作中，每次调用 closeChordsModal 时，您都会保存当前时间 + 2 分钟。

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

然后每次您再次调用该操作时都会检查

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

这样，你的 reducer 仍然是纯粹的，并且 Action 正在照顾行为。

代码示例:

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