Что делать с данными?

Question

[webe]

Вопрос про качество кода.

Есть некий красный компонент, в нем есть кнопка с добавлением данных в БД.
Я разделил этот красный компонент на много маленьких.
1) зеленый отвечает за выбор даты
2) синий за выбранные элементы в чекбоксе
3) желтый - это текст и тема

Задача: По нажатию на красную кнопку add нужно отправить на сервер дату, выбранные элементы чекбокса, текст и тему.


выхода тут 2 как я понял:
1) Храним все не в state компонентов а в redux , там делаем ветку store = {app:{date,checkboxes,topic,message}}
2) в красном компоненте мы создаем 4 стрелочные функции и прокидываем их пропсами в каждый дочерний компонент. Ну а там уже вызываем this.props.handleChangeDate()

Какой вариант предпочтительней?

С одной стороны мы мусорим в редаксе, а с другой занимаемся пробросами, т.е. создаем путаницу.(новому программисту придется искать родителя, он не знает где мы меняем state на самом деле)
как обычно называют callback который приходит с верхнего уровня?

Answer 1

[Антон Спирин]

Лучше хранить все в красном компоненте. Интерфейс дочерних лучше описать так, чтобы хватило одного хандлера hanldeChange для всех компонентов. Компоненты зеленый, синий, желтый лишние. Это вроде форма, пусть в ней и находятся элементы формы, а не непонятные абстракции.

<Form>
  <DatePicker />
  <DatePicker />
  <Divider />
  <CheckBox />
  <CheckBox />
  <CheckBox />
  <Divider />
  <Input />
  <TextArea />
  <Button />
</Form>

лучше и понятней чем:

<Form>
  <DateFromToSelector />
  <FormCheckboxes />
  <Texts />
  <Button />
</Form>

И новому программисту не придется ничего искать.

Comments

[webe]

Антон Спирин как я понял весь смысл в том, что бы навешать onClick/ onChange сразу в красном компоненте непосредственно на родной компонент.
и использовать только один хендл.
У меня просто не голые импуты, вокруг инпута есть различная логика и кнопочки и обертки


вот так?
И получилась путаница в handleChangeDate , теперь мы принимаем не просто флаг но и данные.
Плюс к этому мы создаем стрелочную функцию в onClick что не есть хорошо, но без этого н епрокинуть два параметра в наш хендл.
Теперь нам нужно прокидывать и флаг (называется type) и данные (называется receivedData)

state = {
	data:"01.01.2018",
	checkboxes:[1,2,7,25],
	selectedCategory:76,
	title:"hello",
	message:"Hi!"
	}; // примерно вот так будет меняться стейт красного компонента
 
 
 handleChangeDate = (type, receivedData) => {
	if(type==='now')  	this.setState({date : Moment().now()})
	if(type==='yesterday') this.setState({date : Moment().yesterday()})
	if(type==='week') this.setState({date : Moment().week()})
	if(type==='month') this.setState({date : Moment().month()})
	if(type==='custom') this.setState({date : receivedData})
	if(type==='reset') this.setState({date : null})
		
	if(type==='checkbox')  {
		this.setState(prevState => ({ 
            checkboxes: [...prevState.checkboxes,receivedData]
        }));
	} 	
 }
 

 <Form>
  <DatePicker initial={this.state.date} handleChangeDate = {this.handleChangeDate} />  
<WrapperBtns>
 <StyledBtnPicker  onClick={()=>this.handleChangeDate('now')} type="now">Сегодня</BtnPicker >
 <StyledBtnPicker  onClick={()=>this.handleChangeDate('yesterday')} type="yesterday">Вчера</BtnPicker >
 <StyledBtnPicker  onClick={()=>this.handleChangeDate('week')} type="week">Неделя</BtnPicker >
 <StyledBtnPicker  onClick={()=>this.handleChangeDate('month')} type="month">Месяц</BtnPicker >
</WrapperBtns>
<WrapperReset>
 <IconPicker>
 <BtnPicker type="reset" onClick={()=>this.handleChangeDate('reset')}>Сбросить</BtnPicker >
</WrapperReset>
<CheckBoxes>
{store.getCategiries().map((item)=><Checkbox onChange ={this.handleChangeDate('checkbox',item.id)}/>)}
</CheckBoxes>
....
</Form>

[Антон Спирин]

webe, а почему ваш DatePicker не может возвращать FakeEvent в одном формате?:

{
  target: {
    name,
    value, 
  },
}

и иметь интерфейс:
<DatePicker name="date" value={date} />

Для чекбоксов если имена неизвестны придется писать отдельный handler:

handleCheckboxChange = e => {
    const checkboxes = xor(this.state.checkboxes, [e.target.value]);

    this.setState({ checkboxes });
  }

xor - удобный хелпер из lodash.

[webe]

Было бы проще если бы я вынес как вы сказали, но сделал 7-10 хендлеров.

например хендлеры будут выглядеть так:

handleClickToday = () => {
    const date = moment().format('DD.MM.YYYY');
    this.setState({ active: 'today', date });
  };

  handleClickYesterday = () => {
    const date = moment()
      .subtract(1, 'day')
      .format('DD.MM.YYYY');
    this.setState({ active: 'yesterday', date });
  };


  handleClickMonth = () => {
    const date = moment()
      .subtract(1, 'month') //пример
      .format('DD.MM.YYYY');
    this.setState({ active: 'month', date });
  };
и еще около 5-7 будет


а компоненты выглядят так: 


<WrapperBtns>
 <StyledBtnPicker  onClick={this.handleClickToday} type="now">Сегодня</BtnPicker >
 <StyledBtnPicker  onClick={this.handleClickYesterday } type="yesterday">Вчера</BtnPicker >
 ....
 <StyledBtnPicker  onClick={this.handleClickMonth} type="month">Месяц</BtnPicker >
</WrapperBtns>

так вроде лучше?

[webe]

только минус в том, что кода будет много, около 200-300 строк...
это еще без стилей от SC

[Антон Спирин]

webe, почему ваш DatePicker возвращает значения в разных форматах в разных случаях?
Почему преобразования происходят не внутри него?
В идеале его можно было бы обрабатывать одним хандлером с селектами, инпутами, именнованными чекбоксами и прочим.

[webe]

Антон Спирин, У меня есть чужой компонент react-day-picker
там есть календарь, после того, как тыкаю на число в календаре вызывается мой хендлер для этого нужно привязать onDayClick к моему хендлеру.
что бы выделить день в календаре можно поменять selectedDay

<DayPicker
            onDayClick={this.handleDayClick}
            selectedDays={this.state.selectedDay}
 />

Тут проблемм нет (еше я его модернезировал и обернул в несколько HOC, один из них react-onclickoutside)
Но пользователю лень искать определенные даты в календаре, он хочет сразу выбрать сегодняшний день или вчерашний, что бы пользователь не ковырялся в календаре я создал две кнопочки.
Кнопки "Сегодня" и "Вчера" эти кнопки меняют selectedDay на соответствующие значения.
по сути у меня уже 3 хендрера, так же у меня есть state active , он показывает какая кнопка нажата ()нажата ли кнопка сегодня, нажата ли кнопка вчера или мы надали по календарю, это нужно для удобной ориентации и понимания того что сейчас нажато.
Послевсей этой компоновки получилось много кода и я создал под это отдельную папку и назвал ее MyMegaPicker

мой зеленый компонент (MyMegaPicker)сейчас выглядит так, это хендлеры:

...
 
 handleClickOutside = () => {
    this.setState({ isOpen: false });
	//скрываем календарь если кликнули за его пределы
  };

  handleClickPicker = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen,
    }));
  };

  handleDayClick = day => {
 //этот хендлер вызывает react-day-picker
    this.setState({ selectedDay: day, active: 'custom' });
  };

  handleClickToday = () => {
//этот хендлер вызывает моя кнопка, но после смены selectedDay срабатывает render у  react-day-picker
    this.setState({ selectedDay: new Date(), active: 'today' });
  };

  handleClickYesterday = () => {
    const date = moment().subtract(1, 'day');
    this.setState({ selectedDay: new Date(date), active: 'yesterday' });
//этот хендлер вызывает моя кнопка, но после смены selectedDay срабатывает render у  react-day-picker
  };
  
  ...

Если с инпутами и текстовыми полями я понял как сделать, т.е. я просто выношу все в родителя как вы сказали и мы избавимся от пробросов (Lifting State Up)
Но как быть с этой датой я не могу понять, я не могу ее вынести так же как тестовое поле, потому что мой компонент с датой сложный и его необходимо выносить в отдельный класс.

тут нужно сделать проброс вверх, но не знаю где именно..

1) работаем с selectedDay как работали но еще дублируем его в родительском компоненте через Lifting State Up (меняем стайт в 2 местах)
2) сразу храним selectedDay в Lifting State Up, т.е. кусок стейта будет в родители кусок в нашем

[Антон Спирин]

webe, я бы сделал для календаря все эти ханлеры во внутренней реализации и выносил из него в onChange дату в одном формате.

<MegaDatePicker name="some_date" value={some_date} onChange={this.handleChange} />

в onChange он должен передавать:

{
  target: {
    name: 'some_data', // значение this.pops.name
    value: '12-12-18',  // дата в нужном формате
  },
}

Причем в интерфейс можно передавать функцию formatter. То есть без нее возвращается не форматированная дата. Если она передана возвращается вызов функции formatter с передачей ее значения.
Это если дата может понадобиться в разных форматах.

В итоге как-то так должно работать:

componentDidUpdate(prevProps, prevState) {
  if (prevState.selectedDay !== this.state.selectedDay) {
    this.handleChange(this.state.selectedDay);
  }
}

handleChange = value => {
  const { formatter, onChange } = this.props;

  if (formatter) {
    value = formatter(value);
  }

  onChange({
    target: {
      name,
      value,
    },
  });
};

Если formatter не нужен, не добавляйте.

[Антон Спирин]

webe, нет handleChange из моего примера тоже внутри зеленого, туда пробрасывается this.props.onChange.

<MegaDatePicker name="some_date" value={some_date} onChange={this.handleChange} />

Вот примерный хандлер красного:

handleChange(event) {
    const { target } = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const { name } = target;

    this.setState({
      [name]: value,
    });
  }

Он общий для текстовых полей и этого пикера. По возможности можно еще и именнованные чекбоксы обрабатывать

[webe]

Антон Спирин, спасибо, теперь понял, буду пробовать такую архитектуру :)