Как отправлять действия через таймер с помощью Redux

Я хотел бы отправлять действие каждую секунду, чтобы обновить отображение компонента без состояния. Моя первоначальная наивная попытка заключалась в вызове window.setInterval в функции рендеринга, которая затем вызывается каждый раз при рендеринге компонента, каждый раз запуская новый таймер.

Я рассматривал возможность закрытия переменной, которая указывает, запущен ли уже таймер, но это нарушит концепцию компонента без состояния. Мне интересно, каким будет подходящий способ сделать это с помощью React + Redux, в идеале, продолжая использовать компонент без состояния.


reactjs redux react-redux-form react-component
person w.brian    schedule 22.04.2018    source источник
comment
Чтобы правильно ответить на ваш вопрос, требуется дополнительная информация о вашем приложении и компоненте без сохранения состояния. Если представление компонента зависит от некоторого значения, которое часто обновляется, это определение состояния из учебника. Почему вы хотите, чтобы он был без гражданства?   -  person Moti Korets    schedule 23.04.2018

Ответы (1)


arrow_upward
2
arrow_downward

Обычно такие операции выполняются с помощью хуков жизненного цикла componentDidMount и componentWillUnmount. Если вы хотите сделать это с помощью Redux, вы должны реализовать его в контейнере и передать обновленные значения в компонент без сохранения состояния, если вам это нужно.

Например:

class SomeContainer extends Component {

    _tick = () => {
        this.props.someAction()
    }

    render() {
        return <SomeComponent reduxValue={this.props.someValueFromRedux} />
    }

    componentDidMount() {
        this.timer = setInterval(this._tick, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }
}

const mapStateToProps = ({ someReducer }) => {
    return {
        someValueFromRedux: someReducer.someValueFromRedux
    }
}

export default connect(mapStateToProps, { someAction })(SomeContainer)
person Denys Kotsur    schedule 23.04.2018