const template = Object.keys(data.books).map(item => <span key={data.books[item].id}>{data.books[item].author} - {data.books[item].name}</span>)export function myAction(date) {
return {
type: 'CHANGE_DATE',
data: date
}
}const mapStateToProps = (state) => ({
dates: state.dates,
})
const mapDispatchToProps = (dispatch) => ({
myAction: (date) => dispatch(myAction(date)),
})<DayPickerSection selected={this.props.dates.current} myAction={this.props.myAction} />const DayPickerSection = ({selected, myAction}) => {
return (
<div>
<DatePicker selected={selected}
onChange={(date) => myAction(date) }/>
</div>
);
};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)require('react-datepicker/dist/react-datepicker.css');<ВыборДаты текущаяДата={Дата_из_стора/или роута} /><DatePicker current={myDate} /><DatePicker onDateChange={this.props.getTickets} /><ВыборДаты текущая={мояДата} onDateChange={this.props.загрузиБилеты} />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,
})const dispatch = ...?export function logout {
return {
type: LOGOUT_SUCCESS,
}
}export function login(data) {
return dispatch => {
dispatch({ type: LOGIN_REQUEST })
return request.post(`${API_ROOT_V1}/auth/signin`)
.send(data)
.then(res => {
if (!res.ok) {
dispatch({ type: LOGIN_FAILURE })
dispatch(showNotification({
status: 'err',
text: 'something going wrong',
}))
} else {
dispatch({
type: LOGIN_SUCCESS,
data: res.body.data,
})
localStorage.setItem('cks_token', res.body.data)
dispatch(push('/'))
}
}, err => {
dispatch({ type: LOGIN_FAILURE })
dispatch(showNotification({
status: 'err',
text: err.body && err.body.error || err.message,
}))
})
}
}return dispatch => { - это значит, что АС возвращает функцию, а следовательно в этой функции из-за redux-thunk доступен dispatch. Если вводит в заблуждение ES2015 синтаксис, то это можно было бы написать как return function(dispatch) { ...
Как с этим работать, чтобы не сойти с ума?
Первая проблема, как принять данные?
Например, на onchange селекта мне нужно брать данные с него, что-то считать и выводить в какой-то инпут... какая здесь цепочка действий, и главное в каких файлах?
NODE_ENV=production webpack --progress --config ./webpack.prod.config.js -pnode server.js и открыть в хроме адрес localhost:3000 - будет работать.
export default function configRoutes(store) {
function _ensureAuthenticated(nextState, replace, callback) {
const { dispatch } = store
const { session } = store.getState()
const { currentUser } = session
if (!currentUser && localStorage.getItem('token')) {
dispatch(getCurrentAccount())
} else if (!localStorage.getItem('token')) {
replace('/signin')
}
callback()
}
return (
<Route component={App}>
<Route path='/signin' component={SigninContainer} />
<Route path='/signup' component={SignupContainer} />
<Route path='/' component={AuthenticatedContainer} onEnter={_ensureAuthenticated}>
<Route component={ReportContainer}>
<Route path='/activities' component={ActivitiesContainer} />
<Route path='/activities/:id' component={CaptionsContainer} />
</Route>
</Route>
</Route>
)
}<Provider... , а так же если вы убирали , то первый символ в<App...) - это не валидный код.{
"presets": ["es2015", "stage-0", "react"],
}const mapDispatchToProps = (dispatch) => ({
pollActions: bindActionCreators(PollActions, dispatch),
})const mapDispatchToProps = (dispatch) => ({
getUsers: (params) => dispatch(getUsers(params)),
dispatch,
})...
render()
...
if (this.props.isFetching) {
<p> Loading...</p>
} else {
<p> {ВАШИ_ДАННЫЕ} </p>
}