CODEWITHSUNDEEP
javascriptreactjstoastreactjs-flux
Alias
Alias

Reputation: 3081

Flux/Alt setTimeout not updating store

I'm trying to create a basic "Toast" like service in my React app using Alt.

I've got most of the logic working, I can add new items to the array which appear on my view when triggering the add(options) action, however I'm trying to also allow a timeout to be sent and remove a toast item after it's up:

onAdd(options) {
    this.toasts.push(options);

    const key = this.toasts.length - 1;

    if (options.timeout) {
        options.timeout = window.setTimeout(() => {
            this.toasts.splice(key, 1);
        }, options.timeout);
    }
}

On add, the toast appears on my page, and the timeout also gets triggered (say after a couple of seconds), however manipulating this.toasts inside of this setTimeout does not seem to have any effect.

Obviously this is missing the core functionality, but everything works apart from the setTimeout section.

Upvotes: 1

Views: 291

Answers (1)

Doug
Doug

Reputation: 2312

It seems that the timeout is setting the state internally and is not broadcasting a change event. It might be as simple as calling forceUpdate(). But the pattern I use is to call setState() which is what I think you might want in this case.

Here is an example updating state and broadcasting the change event.

import alt from '../alt'
import React from 'react/addons'
import ToastActions from '../actions/ToastActions'

class ToastStore {

	constructor() {
		this.toasts = [];
		this.bindAction(ToastActions.ADD, this.add);
		this.bindAction(ToastActions.REMOVE, this.remove);
	}

	add(options) {
		this.toasts.push(options);
		this.setState({toasts: this.toasts});
		if (options.timeout) {
			// queue the removal of this options
			ToastActions.remove.defer(options);
		}
	}

	remove(options) {
		const removeOptions = () => {
			const toasts = this.toasts.filter(t => t !== options);
			this.setState({toasts: toasts});
		};
		if (options.timeout) {
			setTimeout(removeOptions, options.timeout);
		} else {
			removeOptions();
		}
	}

}

module.exports = alt.createStore(ToastStore, 'ToastStore');

Upvotes: 0

Related Questions