React 和 Redux 架构回顾答案

【问题标题】：React and Redux architecture reviewReact 和 Redux 架构回顾
【发布时间】：2017-01-14 23:24:51
【问题描述】：

我是响应世界的新手，我正在尝试了解构建代码的最佳方式。

实际上，它是一个使用 react-native-router-flux 的 react-native，但我认为这些对问题没有任何影响。

我尝试过这样设置启动画面：

/* @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;

当应用程序启动时，这个场景被渲染，并且一个 init 动作被调度。通过 reducer 后，它将状态更改为已验证或 showlock，然后我将重定向到下一个场景。

实际上，这一切都完美无缺。但是我收到以下警告：

警告：setState(...)：在现有状态期间无法更新过渡（例如在render 或其他组件的构造函数）。渲染方法应该是 props 的纯函数和状态;构造函数副作用是一种反模式，但可以移动到componentWillMount。

完成类似任务的推荐方法是什么？

即在商店状态更改时调用方法？

【问题讨论】：

标签： reactjs react-native redux react-native-router-flux

【解决方案1】：

不确定我是否得到了最好的方法，但这种方法对我来说似乎已经更好了：

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

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

}

render() {


    return (
        <View>

        </View>

    );
}

【讨论】：