2017-02-21 44 views
0

我試圖移動應用終極版(新手)什麼是最好的做法。我有這個代碼,我很困惑一些設置初始狀態的最佳實踐。例如,這是代碼設定初始狀態時,如果我在終極版使用反應程序

class App extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     cityName: '', 
     nameOfCity:'', 
     weatherDescription:'', 
     windSpeed:'', 
     temperature:'', 
     maxTemperature:'', 
     minTemperature:'' 
    }; 
} 

updateInfo(results){ 
    this.setState({ 
     nameOfCity: results.city.name, 
     weatherDescription: results.list[0].weather[0].description, 
     windSpeed: results.list[2].wind.speed, 
     temperature: results.list[0].main.temp, 
     maxTemperature: results.list[0].main.temp_max, 
     minTemperature: results.list[0].main.temp_min 
    }); 
    } 

render() { 
return (
    <div className="App"> 
    <div className="App-header"> 
     <img src={logo} className="App-logo" alt="logo" /> 
     <h2>Weather App</h2> 
    </div> 
    <p className="App-intro"> 
     To get started, edit <code>src/App.js</code> and save to reload. 
    </p> 
     <FormContainer label="Name of the city:" updateInfo={this.updateInfo.bind(this)}/> 
     <WeatherInfo 
      nameOfCity={this.state.nameOfCity} 
      weatherDescription={this.state.weatherDescription} 
      windSpeed={this.state.windSpeed} 
      temperature={this.state.temperature} 
      maxTemperature={this.state.maxTemperature} 
      minTemperature={this.state.minTemperature} 
     /> 
    </div> 
); 
} 
} 

什麼是當你使用終極版

回答

1

當使用終極版,你不應該需要使用這種方式作出反應狀態。就像所有的應用數據一樣。所有這種狀態應該被轉移到中央的redux商店,並通過行動和減速器進行填充。然後,您使用的react-reduxconnect方法商店狀態映射到組件的道具。

對於您的應用updateInfo應該是一個行動的創建者和有減速將減少這個動作進入狀態發送表單數據。由於redux狀態已映射到您的組件的視頻,視圖將按照您期望的那樣更新this.props.weatherDescription或您喜歡的任何數據。

看一看文檔here獲得如何構建一個反應Redux的應用更全面的想法。還有如何開始使用Redux的視頻系列here

相關問題