Определить время, прошедшее между двумя условиями - PullRequest
Новая
       8

Определить время, прошедшее между двумя условиями

0 голосов
/ 19 июня 2020

Я сейчас работаю над приложением React и пытаюсь определить время, необходимое для достижения определенной длины входного значения.

Это управляемый ввод, значение которого сохраняется и устанавливается через действие redux и reducer.

Я хочу начать отсчет времени, когда входное значение !== "", и прекратить отсчет, когда значение .length равно 13.

Далее в приложении logi c, если время, необходимое для достижения .length === 13, примерно равно 100ms (+ или -), это будет означать, что пользователь приложения использовал сканер штрих-кода, иначе он набрал штрих-код с клавиатуры.

i Я пытался использовать переменные с new Date(), чтобы получить разницу во времени, но render() logi c блокирует поддержание количества прошедшего времени ...

Любая идея о том, как я могу достичь своей цели ?

Я оставляю вам код компонента чуть ниже, заранее спасибо! 

import React from "react";
import StoreInput from "../StoreInput/index";
import { connect } from "react-redux";
import "./index.scss";

import { setStoreInputFieldValue } from "../../actions/store.actions";
import { addArticleToStore } from "../../actions/articles.actions";

type ScanSetProps = {
  // Redux State
  storeInputFieldValue?: any;

  // Redux Actions
  setStoreInputFieldValue?: any;
  addArticleToStore?: any;
};

class ScanSet extends React.Component<ScanSetProps> {
  handleScanSet = (event) => {
    const { setStoreInputFieldValue } = this.props;
    setStoreInputFieldValue(event.target.value);
  };

  // Component render
  render() {
    const { storeInputFieldValue, addArticleToStore } = this.props;

    return (
      <div className="ScanSet">
        <StoreInput
          idStoreInput={"scanSetInput"}
          typeStoreInput={"number"}
          placeholderStoreInput={
            "Scannez le code barre ou saisissez le code EAN"
          }
          storeInputFillMethod={this.handleScanSet}
        />
        <button
          id="scanSetButton"
          className={
            storeInputFieldValue.length === 13
              ? "enabledButton"
              : "disabledButton"
          }
          onClick={() => addArticleToStore(storeInputFieldValue)}
        >
          Ajouter
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  storeInputFieldValue: state.store.storeInputFieldValue,
});

const mapDispatchToProps = (dispatch) => ({
  setStoreInputFieldValue: (input_value) =>
    dispatch(setStoreInputFieldValue(input_value)),
  addArticleToStore: (article_ean) => dispatch(addArticleToStore(article_ean)),
});

export default connect(mapStateToProps, mapDispatchToProps)(ScanSet);

Ответы [ 2 ]

0 голосов
/ 25 июня 2020
Ответ

Urmzd был хорошим подходом, он решил мою проблему, а также использовал библиотеку Redux Saga каждый раз, когда действие "SET_END_TIME" запускается для getTimeDiff и запускает дальнейшие logi c. Вот как теперь выглядит код:

  1. Код компонента: index.tsx 
import StoreInput from "../StoreInput/index";
import { connect } from "react-redux";
import "./index.scss";

import {
  setStoreInputFieldValue,
  setStartTime,
  setEndTime,
  resetTimeDiff,
} from "../../actions/store.actions";
import { handleInputEan } from "../../actions/articles.actions";

type ScanSetProps = {
  // Redux State
  storeInputFieldValue?: any;

  // Redux Actions
  setStoreInputFieldValue?: any;
  handleInputEan?: any;
  setStartTime?: any;
  setEndTime?: any;
  resetTimeDiff?: any;
};

class ScanSet extends React.Component<ScanSetProps> {
  handleScanSet = (event) => {
    const {
      setStoreInputFieldValue,
      storeInputFieldValue,
      setStartTime,
      setEndTime,
      resetTimeDiff,
    } = this.props;
    setStoreInputFieldValue(event.target.value);
    if (storeInputFieldValue.length + 1 === 1) {
      setStartTime();
    } else if (storeInputFieldValue.length + 1 === 13) {
      setEndTime();
    } else if (storeInputFieldValue.length - 13 === 0) {
      resetTimeDiff();
    }
  };

  // Component render
  render() {
    const { storeInputFieldValue, handleInputEan } = this.props;
    return (
      <div className="ScanSet">
        <StoreInput
          idStoreInput={"scanSetInput"}
          typeStoreInput={"number"}
          placeholderStoreInput={
            "Scannez le code barre ou saisissez le code EAN"
          }
          storeInputFillMethod={this.handleScanSet}
        />

        <button
          id="scanSetButton"
          className={
            storeInputFieldValue.length === 13
              ? "enabledButton"
              : "disabledButton"
          }
          onClick={() => handleInputEan()}
        >
          Ajouter
        </button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  storeInputFieldValue: state.store.storeInputFieldValue,
  timeDiff: state.store.timeDiff,
});

const mapDispatchToProps = (dispatch) => ({
  setStartTime: () => dispatch(setStartTime()),
  setEndTime: () => dispatch(setEndTime()),
  resetTimeDiff: () => dispatch(resetTimeDiff()),
  setStoreInputFieldValue: (input_value) =>
    dispatch(setStoreInputFieldValue(input_value)),
  handleInputEan: () => dispatch(handleInputEan()),
});

export default connect(mapStateToProps, mapDispatchToProps)(ScanSet);
Код действий: store.actions. js (с константами из store.const. js) 
import * as storeConst from "../const/store.const";

export const setStartTime = () => ({
  type: storeConst.SET_START_TIME,
  payload: new Date().getTime(),
});

export const setEndTime = () => ({
  type: storeConst.SET_END_TIME,
  payload: new Date().getTime(),
});

export const getTimeDiff = () => ({
  type: storeConst.GET_TIME_DIFF,
});

export const resetTimeDiff = () => ({
  type: storeConst.RESET_TIME_DIFF,
});
Код редукторов: store.reducer. js (с константами из store.const. js и редукторами, объединенными в файл index. js) 
import * as storeConst from "../const/store.const";

const initState = {
  startTime: null,
  endTime: null,
  timeDiff: null,
};

const store = (state = initState, action) => {
  switch (action.type) {
    case storeConst.SET_START_TIME:
      return { ...state, startTime: action.payload };

    case storeConst.SET_END_TIME:
      return { ...state, endTime: action.payload };

    case storeConst.GET_TIME_DIFF:
      return { ...state, timeDiff: state.endTime - state.startTime };

    case storeConst.RESET_TIME_DIFF:
      return { ...state, timeDiff: null };

    default:
      return state;
  }
};

export default store;
Код Redux Saga: store.saga. js (вместе: в index. js файл как rootSaga) 
import { put } from "redux-saga/effects";
import { store } from "../store";
import {
  getTimeDiff,
  resetTimeDiff,
} from "../actions/store.actions";
import {
  handleInputEan,
} from "../actions/articles.actions";

export function* getTimeDiffLogic() {
  yield put(getTimeDiff());
  const timeDiff = yield store.getState().store.timeDiff;
  if (timeDiff < 250) {
    yield put(handleInputEan());
    yield put(resetTimeDiff());
  }
}

Надеюсь, что это поможет кто-то вроде мне очень помог!

0 голосов
/ 19 июня 2020

Я бы рекомендовал использовать состояние.

При вводе! == '', this.setState((state) => {...state, startTime: new Date().getTime()}) Когда value.length === 13, this.setState((state) => {...state, endTime: new Date().getTime()}

Тогда у вас может быть другая часть что объясняет разницу, (endTime - startTime)

Поскольку вы используете redux, если у вас есть срез, который учитывает это. Вы можете просто отправить два действия (setStartTime, setEndTime) и позволить редуктору обработать logi c выше.

...