2017-02-21 14 views
0

Я пытаюсь переместить приложение в redux (новичок). У меня есть этот код, и я немного смущен, что лучше всего установить начальное состояние. Например это кодКакова наилучшая практика при настройке начального состояния, если я использую reducex в приложении-реакции

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-redux, чтобы отобразить состояние хранилища на реквизиты компонента.

Для вашего приложения updateInfo должен быть создатель действия и иметь редуктор, который уменьшит данные формы, отправленные этим действием в состояние. Поскольку состояние redux отображается на реквизиты вашего компонента, представление будет обновляться, как вы ожидали бы, отображая this.props.weatherDescription или любые другие данные, которые вам нравятся.

Посмотрите документацию here, чтобы получить более полное представление о том, как структурировать приложение reduux для реагирования. Существует также серия видеороликов о начале работы с сокращением here