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

Question

I'm developing a React Native Redux application and I've run into an issue where I'm struggling to figure out the cleanest most effective solution.

I have a reducer which manages a modal like this:

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

Then I have my actions for the modal here:

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

Basically I'm looking at the closeChordsModal action.

I currently have an interstitial ad which displays every time the modal closes. This works great but I want to improve the user experience by limiting the amount of times the interstitial ad pops.

I want to make sure that once the ad shows for the first time, it doesn't show again for at least another 2 minutes.

ie The user opens and closes the modal, the ad appears (currently what's happening). Then the user opens and closes the modal again, if it has been within 2 minutes since the last close modal action, just close the modal, Otherwise close the modal and show the interstitial ad.

How can I accomplish that? Thanks a lot!

Answer 1

Since the solution involves Date to wait for the 2 minutes, we can't do that in the reducer, because reducers have to be pure, no side effect or external dependency (yes, time is an external dependency).

In your action, every time you call closeChordsModal you save the current time + 2 minutes.

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

then every time you call that action again you check that

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

In this way, your reducer is still pure and the action is taking care of the behaviour.

Code example:

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 implements the browser timers. Maybe you can try something like this:

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();
    }
  }
}