У вас на onChange функция, которая просто форматирует дату. И все, я даже затрудняюсь сказать, какой от этого будет эффект, но помоему никакой.
Нужно на onChange прокидывать функцию - создатель действия, например, у нас это будет myAction.
Следовательно, где-то там в actions будет примерно такой код:
export function myAction(date) {
return {
type: 'CHANGE_DATE',
data: date
}
}
Затем где-то в редьюсере, должно быть соответствующее условие, например, на case 'CHANGE_DATE' у вас будет устанавливаться в
current дата. (специально не пишу код, чтобы немного поработали сами).
В конце концов, в вашем контейнере, у вас должны быть mapStateToProps и mapDispatchToProps примерно такого вида:
const mapStateToProps = (state) => ({
dates: state.dates,
})
const mapDispatchToProps = (dispatch) => ({
myAction: (date) => dispatch(myAction(date)),
})
Ну и само подключение DayPickerSection будет выглядеть примерно так:
<DayPickerSection selected={this.props.dates.current} myAction={this.props.myAction} />
А в рендере (имеется в виду в рендере DayPickerSection) будет следовательно:
const DayPickerSection = ({selected, myAction}) => {
return (
<div>
<DatePicker selected={selected}
onChange={(date) => myAction(date) }/>
</div>
);
};
Итого (читать медленно): в onChange компонента DatePicker попадет свойство this.props.myAction "прокинутое" в DayPickerSection. В свою очередь, в DayPickerSection это свойство будет равно функции, которая будет "прокинута" с помощью mapDispatchToProps в this.props контейнера. Контейнер, называйте его как хотите, в нашем случае это родительский элемент, например, который "приконекчен" (c помощью функции connect), и который из-за этого принимает к себе в this.props данные описанные в mapStateToProps и в mapDispatchToProps, которые в свою очередь являются чем то вроде карты. То есть, в конечном счете в this.props.myAction вашего контейнера попадет функция myAction из вашей папки actions. Конечно, для этого ее нужно импортировать в начале файла (import { myAction } from '../actions'.)
Контейнер может выглядеть так:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { myAction } from '../actions'
class App extends Component {
render() {
const { dates, myAction } = this.props
return (
<div className='my-app'>
<DayPickerSection selected={dates.current} myAction={myAction} />
</div>
)
}
}
const mapStateToProps = (state) => ({
dates: state.dates,
})
const mapDispatchToProps = (dispatch) => ({
myAction: (date) => dispatch(myAction(date)),
})
export default connect(mapStateToProps, mapDispatchToProps)(App)
