Question

我正在尝试将应用程序移至redux（新手）。我有这个代码，我有点困惑一点，设置初始状态的最佳做法是什么。例如，这是代码

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>
  );
}
}

使用redux

时最佳做法是什么？

Answer 1

首先，您需要在应用程序中设置redux，然后在redux store中设置初始状态请仔细阅读此链接

http://redux.js.org/docs/introduction/Examples.html

Answer 2

使用Redux时，您不应该以这种方式使用反应状态。与所有应用程序数据一样。所有这些状态都应该移动到中央redux商店并通过操作和减少器填充。然后使用connect react-redux方法将商店状态映射到组件的道具。

对于您的应用updateInfo应该是一个动作创建者，并且有一个reducer，它会将此操作中发送的表单数据减少到该状态。因为redux状态映射到您组件的props，所以视图将按照您期望的方式更新this.props.weatherDescription或您喜欢的任何数据。

查看文档here，以更全面地了解如何构建react redux应用程序。还有一个关于redux here

入门的视频系列

如果我在react app中使用redux，那么设置初始状态时的最佳做法是什么

2 个答案: