Datepicker React/Redux?

Question

[ch-aqwer]

Добрый день! Начал учить redux с reactjs и вот простая задача, нужно вывести datepicker.
Нашел такую штуку
Скажите пожалуйста, как правильно это все написать с помощью redux ?
Имею в виду, что где записать component/.. , containers/.. и как передать и обработать onchange?
Заранеее - спасибо!

Answer 1

[Максим]

Универсальный рецепт для любых сторонних компонентов.

1. Сторонний компонент, если он хороший, обычно ничего не знает о данных. Он их только отображает. Это то что нам нужно.

2. Раз компонент ожидает от нас данные, мы должны их в него передать. Например в контейнере СтраницаБилетов, у вас подключается компонент ВыборДаты. Супер, чтобы в ВыборДаты передать данные используются props. Будет примерно так:

<ВыборДаты текущаяДата={Дата_из_стора/или роута} />

либо EN вариант:
<DatePicker current={myDate} />

3. Далее, у стороннего компонента (опять же, если он хороший) наверняка, есть какой-то onChange обработчик. Предположим, что он называется onDateChange. Следовательно, мы в контейнере подключаем AC (создатель действия, экшен), и передаем его в компонент. Выглядеть будет примерно так:

<DatePicker onDateChange={this.props.getTickets} />

либо русский вариант (просто для понимания, вдруг пригодится)

<ВыборДаты текущая={мояДата} onDateChange={this.props.загрузиБилеты} />

Причем, функция загрузки новых билетов для этой даты, это не что иное, как экспортируемая функция из папки с вашими экшенами.
---

Приведу пример с кодом, хотя так как я его вытащил с реального проекта, он может вас запутать некоторой сложностью:

Это мой компонент DayPicker, который внутри себя подключает компонент DatePicker

class DayPicker extends Component {
  constructor(props) {
    super(props)
    this.state = {
      start: null,
    }
  }
  componentWillMount() {
    const { startTime } = this.props
    this.setState({ start: startTime })
  }
  componentWillReceiveProps(nextProps) {
    const { startTime } = nextProps
    this.setState({ start: startTime })
  }
  render() {
    const { start } = this.state
    const { onDateChange } = this.props

    return (
      <section>
        <div className='date-picker'>
          <DatePicker
            className='form-control'
            placeholderText={'Введите дату'}
            selected={moment(start)}
            onChange={ (moment) => onDateChange('startTime', moment) }/>
        </div>
      </section>
    )
  }
}

Тем не менее, это компонент. И он должен как-то получать в себя данные. Это происходит в контейнере, кода там много, приведу кусочек:

// обработчик onDateChange
onDateChange(dateField, moment) {
  const query = this.props.location.query
  const nextQuery = {
    ...query,
    [dateField]: moment.format('YYYY-MM-DD'),
  }
  // так как у меня все завязано на роутинге, здесь другой вызов ниже,
  // но для простоты примеры, здесь необходимо вызвать экшен, например getTickets(dateField)
}

// это находится в render функции
const { startTime } = this.props

<div className='row row-margin'>
  <div className='col-md-12'>
    <DayPicker
      onDateChange={this.onDateChange}
      startTime={startTime}
    />
  </div>
</div>

// ваш экшен getTickets(dateField) наверняка подключается так
import { getTickets } from '../../actions/TicketsActions'
//...
const mapDispatchToProps = (dispatch) => ({
  getTickets: (dateField) => dispatch(getUsers(dateField)),
})
//...

// ваша переменная startTime наверняка приходит из редьюсера / роута, у меня из роута
const mapStateToProps = (state, ownProps) => ({
  startTime: ownProps.location.query.startTime,
})

Comments

[ch-aqwer]

Спасибо, за развернутый ответ)
Есть вопрос,
render() {
const { start } = this.state
const { onDateChange } = this.props

return (

onDateChange('startTime', moment) }/>


)
}

рендер не должен происходить в store?
Как это выглядеть в jsx?

[Максим]

ch-aqwer: не все скопировалось? в return должен быть валидный jsx код. Например:

[Максим]

ch-aqwer: < DayPicker onChange={myAction('2016-08-11') / >

[ch-aqwer]

Максим: Максим: У вас в компоненте DayPicker происходит render. Я имею в виду, не должно ли это происходить в store?

[Максим]

ch-aqwer: что вы имеете в виду под "store" ?

[ch-aqwer]

Максим: Хранилище. Может я не так понял Redux... просто во всех примерах рендер осуществляется один раз в корневом компоненте.

[Максим]

ch-aqwer: store - это объект (в прямом смысле, это обычный JS объект). Хранилище, да. Рендер - это метод render() у каждого компонента. Сколько у вас компонентов, столько и рендеров.

[ch-aqwer]

Ну вот этот метод render() есть только в основного компонента, в примере на сайте redux.
render(
,
document.getElementById('root')
)