Datepicker React/Redux?

Question

JavaScript

Good afternoon! I started learning redux with reactjs and here is a simple task, you need to display the datepicker.
I found such a thing
. Please tell me how to write all this correctly with the help of redux ?
I mean where to write component/.. , containers/.. and how to pass and handle onchange?
Thanks in advance!

Answer 1

Universal recipe for any third-party components.
1. A third party component, if it's good, usually doesn't know anything about the data. He only displays them. This is what we need.
2. Since the component expects data from us, we must pass them to it. For example, in the Ticket Page container, you have the Date Picker component connected. Super, in order to pass data to the Date Picker, props are used . It will be something like this:

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

or EN option:
3. Further, the third-party component (again, if it is good) probably has some kind of onChange handler. Let's say it's called onDateChange. Therefore, we connect AC (action creator, action) in the container and pass it to the component. It will look something like this:
or the Russian version (just for understanding, suddenly come in handy)
Moreover, the function of downloading new tickets for this date is nothing more than an exported function from the folder with your actions.
---
I will give an example with code, although since I pulled it from a real project, it may confuse you with some complexity:
This is my DayPicker component, which internally connects the DatePicker component

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>
    )
  }
}

However, it is a component. And he must somehow receive data into himself. This happens in the container, there is a lot of code, I will give a piece:

// обработчик 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,
})