These are chat archives for dev-ua/reactjs

27th
Jun 2015
Eugeniy
@boyarskiy
Jun 27 2015 07:17

я вот пытаюсь все сделать через flux, но все-таки не могу понять, как быть если у меня в умном компоненте например, несколько датапикеров, там можно выбрать дату, переключать месяцы, и т.д., получается, что нужно для каждого отдельно хранить состояние в сторе? типа:

state = {
datapicker1: { show: false, date: '' }, 
datapicker2: { show: false, date: '' }
}

Или я что-то не так понимаю?

Nik Butenko
@nkbt
Jun 27 2015 07:21
можно один стор для дейтпикеров в котором каждый новый дейтпикер хранить свое состояние, и когда элемент убивается - удалять из стора его состояние. но это как-то немного странно
Eugeniy
@boyarskiy
Jun 27 2015 07:26
вот и я думаю, что это как-то странно, кажется, что хранить стейт в самом компоненте будет проще, но с другой стороны это же глупый компонент, который по идее нужно избавлять от стейта
Nik Butenko
@nkbt
Jun 27 2015 07:34
Оберни в умный
если тебе стейт не надо шарить между компонентами и этот стейт только для дейт-пикера - то не надо флакс, сторь стейт внутри компонента
Если конечно быть полным пьюристом и не юзать стейт принципиально, то тогда конечно да…. через стор
Eugeniy
@boyarskiy
Jun 27 2015 07:47
Из датапикера мне по идее нужно шарить только выбранную дату, а про открытие/закрытие или переключение месяцев другие компоненты могут не знать
Ivan Kurnosov
@zerkms
Jun 27 2015 08:04

и когда элемент убивается - удалять из стора его состояние. но это как-то немного странно

Это совсем не странно

Представь этот вот чатик: есть список людей. Каждый человек - отдельный объект, который убирается из стора, когда выходит из чата
Eugeniy
@boyarskiy
Jun 27 2015 08:15
то есть, получается, можно создать отдельный стор для датапикеров, и там хранить состояние активного компонента, переключение месяцев, выбор даты и тд ?
Nik Butenko
@nkbt
Jun 27 2015 09:05
хранить не состояние активного, а состояние всех. по uuid какому-нибудь
но когда компонент удаляется willUnmount, то удалять его барахло из стора
странно не то, что удалять, а странно это все немного
сделай компонент со своим личным стейтом и передавай ему проп onChange, все дела
зачем огород городить.
ну разве что because I can
вполне себе reason
Eugene Krevenets
@hyzhak
Jun 27 2015 13:27
правильно ли я понял, что чтобы воспользоваться jest нужно ставить iojs и facebook/jest#0.5.x? Иначе на 0.12 ноде у меня jest просто молча падает, а на не 0.5 jest говорит что хочет быть запущен с ключем --harmony.
Nik Butenko
@nkbt
Jun 27 2015 14:23
не совсем
нода 0.12 вообще не поддерживается
можешь сидеть на старом джесте на ноде 0.10
или на новом джесте но только на иожс
Eugene Krevenets
@hyzhak
Jun 27 2015 14:56
хм вот как - а почему не поддерживается?
Vyacheslav Slinko
@vslinko
Jun 27 2015 15:25
не успели
vogrelord
@vogrelord
Jun 27 2015 16:29
Глупые компоненты не надо избавлять от юи стейта
Из них надо убирать все, что может понадобиться снаружи
Например value
Eugeniy
@boyarskiy
Jun 27 2015 17:52
если инпут часть глупого компонента, как из него убрать value ?
Julian Ustiyanovych
@julianusti
Jun 27 2015 21:39
Привет, может кто-то стылкался с проблемой экспорта es6:
export Header from './Header';
говорит что Unexpected token (1:7)
Header
хидер - это реакт компонента, вот так она экспортируется
class Header extends Component {….}
export default Header;
Ivan Kurnosov
@zerkms
Jun 27 2015 21:46
@julianusti это дефолтный экспорт, если ты хочешь дефолтный же ре-экспорт то нужно:
export { default } from './Header';
Julian Ustiyanovych
@julianusti
Jun 27 2015 21:51
да не, не то.
Ivan Kurnosov
@zerkms
Jun 27 2015 21:51
что такое "не то"?
Julian Ustiyanovych
@julianusti
Jun 27 2015 21:51
не помогло )
Ivan Kurnosov
@zerkms
Jun 27 2015 21:52
"не помогло" это не описание проблемы
"не работает" - тоже
Реэкспорт дефолтного экспорта в ES6 делается так, как я показал
Julian Ustiyanovych
@julianusti
Jun 27 2015 21:52
значит проблема в чем-то другом.
Ivan Kurnosov
@zerkms
Jun 27 2015 21:52
Какая проблема?
vogrelord
@vogrelord
Jun 27 2015 22:09
@boyarskiy, вот так:
<input onChange={this.props.onInputChange} value={this.props.inputValue}/>
vogrelord
@vogrelord
Jun 27 2015 22:18
Вот такой псевдокодик:
class DumbComponent extends Component{
           constructor(){
                   super();
                   this.state = {toggleOn: false};
           }
           render(){
                    return this.state.toggleOn ? 
                                                         <input onChange={(e)=>this.props.onChange(e.target.value)} value={this.props.value}/>
                                                      :  <span onClick={()=>this.setState({toggleOn: true})}>{this.props.value}</span>
           }
}


class SmartComponent extends Component {

      render(){
             return <DumbComponent value={UsersStore.getUserName(this.props.userId)} onChange={(val)=>Actions.changeUserName(this.props.userId, val)}/>
      }
}
накидал на скорую руку, может, не скомпилиться даже, но принцип передан.
Nik Butenko
@nkbt
Jun 27 2015 22:58
@vogrelord :+1: