React和Redux體系結構評論

我對新的世界有所反應，我試圖理解什麼是構建我的代碼的最佳方式。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，然後我將重定向到下一個場景。

它實際上完美地運作。然而I'm得到以下警告：

警告：的setState（...）：現有狀態轉變過程中無法更新（如內render或其他部件的構造）。渲染方法應該是道具和純粹功能的狀態;構造函數的副作用是反模式，但可以將移動到componentWillMount。

什麼是建議的方式來完成類似的東西？

即使存儲狀態改變調用方法？

來源

2017-01-14 Luiz Henrique Martins Lins Rol

不知道，如果我得到的最好的方式，但這種方式似乎已經更好地對我說：

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

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

} 

render() { 


    return (
     <View> 

     </View> 

    ); 
}

來源

2017-01-15 02:32:44

React和Redux體系結構評論

回答

相關問題