javascript - 如果我在 React 应用程序中使用 redux，设置初始状态时的最佳实践是什么

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 时，您不需要以这种方式使用 react 状态。与所有应用程序数据一样。所有这些状态都应该转移到中央 redux 存储并通过操作和 reducer 填充。然后，您使用 react-redux 的 connect 方法将存储状态映射到组件的 props。

对于您的应用程序，updateInfo 应该是一个操作创建者，并具有一个 reducer ，它将将此操作中发送的表单数据减少到状态中。由于 redux 状态映射到组件的 props，因此 View 将按照您的预期通过显示 this.props.weatherDescription 或您喜欢的任何数据进行更新。

查看文档 here更全面地了解如何构建 React Redux 应用程序。还有一个关于 redux 入门的视频系列 here