Обзор архитектуры React и Redux

Я новичок в мире реагирования, и я пытаюсь понять, как лучше всего спроектировать мой код.

На самом деле, это реакция, использующая react-native-router-flux, но я не думаю, что это имеет какое-либо значение для вопроса.

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

/* @flow */
'use strict';

import { connect } from 'react-redux';

import React, { Component } from 'react';

import { View, Text, Image } from 'react-native';

import { init } from "../core/auth/actions"

import { Actions } from 'react-native-router-flux';

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.authState.authenticated,
        showLock: state.authState.showLock
    }
}

class Splash extends Component {

    constructor(props) {
        super(props)
    }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(init());
    }

    navigateToHome(){
        Actions.home();
    }

    navigateToLogin(){
        Actions.login();
    }

    render() {

        const { isAuthenticated, showLock } = this.props

        return (
            <View>
                {isAuthenticated &&
                    this.navigateToHome()
                }
                {showLock && this.navigateToLogin()}
            </View>

        );
    }

}

const connectedSplash = connect(mapStateToProps)(Splash)

export default connectedSplash;

Когда приложение запускается, эта сцена визуализируется и отправляется действие инициализации. После прохождения редюсера он меняет состояние либо на аутентифицированный, либо на showlock, а затем я перенаправляюсь на следующую сцену.

На самом деле все работает идеально. Однако я получаю следующее предупреждение:

Предупреждение: setState(...): Невозможно обновить во время существующего перехода состояния (например, в render или конструкторе другого компонента). Методы рендеринга должны быть чистой функцией свойств и состояния; побочные эффекты конструктора являются анти-шаблоном, но их можно переместить в componentWillMount.

Каков был бы рекомендуемый способ сделать что-то подобное?

То есть при изменении состояния хранилища вызывается метод?


person Luiz Henrique Martins Lins Rol    schedule 14.01.2017    source источник


Ответы (1)


Не уверен, что я получил лучший из возможных способов, но этот подход мне уже показался лучше:

    componentDidUpdate(){
    const { isAuthenticated, showLock } = this.props
    if (isAuthenticated){
        return this.navigateToHome();
    }

    if (showLock){
        this.navigateToLogin();
    }

}

render() {


    return (
        <View>

        </View>

    );
}
person Luiz Henrique Martins Lins Rol    schedule 15.01.2017