Самопроизвольное выполнение action в redux

188
16 марта 2018, 15:24

Имеется такой код(прилагаю важные части для понимания). Игра найди пару. Когда картинки не совпадают, они скрываются. Для обозначения когда проводить проверку, взял по простому клик. В редюсере его обнуляю. В sources картинки для сравнения.

Контейнер с картинками:

class Container extends Component {
    handleClickSquare = (image, index) => {
        const { images, click, running, time } = this.props
        const { toggleImage } = this.props.imgActions
        if (click !== 2){
            if(running && time !== 0 || image.visible ) {
                toggleImage(index, click)
            }
        }
    }
    componentDidUpdate() {
        const { images, click } = this.props
        if (click === 2) this.isFullfilled()
    }
    isFullfilled = () => {
        ...
        (compare(sources)) ? stayDisplayed() : stayHiddenWithTimeout(sources)
        ...
    }
    render(){return(...)}
}

Action:

const stayHidden = (id, sources) => ({ type: STAY_HIDDEN, id, sources })

let timeoutId = 0
export const stayHiddenWithTimeout = (sources) => dispatch => {
    const id = timeoutId++
    setTimeout(() => dispatch(stayHidden(id, sources)), 1000)
}

В редюсере, я пробегаюсь по объекту картиник и сверяю, если визибл - скрыть. Проблема: Есть момент, когда нажимаешь третий раз, на другой квадрат, он появляется и сразу скрывается. В логе я вижу, что выполнилось действе STAY_HIDDEN, хотя на данный момент уже клик = 1. Да и таймаута у этого действия нет. Странное поведение. P.S. Подозреваю, что это из-за таймера, который тикает. Без него такой проблемы не возникает. То есть что-то связанное с обновлением state.

Таймер:

export const startTimer = (rows, cols, showTime) => (dispatch) => {
   clearInterval(timer)
   if (showTime) {
      dispatch(displayAll())
      setTimeout(() => {
         dispatch(hideAll())
         timer = setInterval(() => dispatch(tickTimer()), 1000)
      }, showTime*1000)
   } else {
      timer = setInterval(() => dispatch(tickTimer()), 1000)
   }
   dispatch({ type: TIMER_START,  showTime })
}
const displayAll = () => ({type: DISPLAY_ALL})
const hideAll = () => ({type: HIDE_ALL})
const tickTimer = () => ({type: TIMER_TICK})

Таймер находится рядом с контейнером(может это важно).

READ ALSO
Carousel Thumbnails (карусель в каруселе)

Carousel Thumbnails (карусель в каруселе)

Всем приветСобственно вопрос как сделать в Owl Carousel, Thumbnails так же каруселью

150
trigger input type color

trigger input type color

При загрузкe страницы в input type="color" есть value, которое содержит уже по умолчанию цвет #0000ff - пробую сделать через trigger("input"), но ничего не происходит:

186
Ошибки во время INSERT

Ошибки во время INSERT

Вычитываю массив, в нем ориентировочно 3840 строкВот код

190