Время реакции запускает неожиданные редукционные действия - PullRequest
Новая
       19

Время реакции запускает неожиданные редукционные действия

0 голосов
/ 05 сентября 2018

Я изучаю React и Redux. Я застрял с подключением компонента реагирующих дат к Redux. Основная проблема заключается в том, что что-то (возможно, даты реакции) запускает действия с избыточностью (SET_START_DATE, SET_END_DATE) в начале приложения, даже если они должны произойти после того, как я нажму на дату внутри календаря. Таким образом я получаю эти ошибки: 

Failed prop type: Invalid input type: `startDate` of type `string` 
supplied to `withStyles(DateRangePicker)`, expected `object`.

Failed prop type: Invalid input type: `endDate` of type `string` 
supplied to `withStyles(DateRangePicker)`, expected `object`.

Uncaught TypeError: date.format is not a function

Код компонента с помощью DatePicker: 

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

import React, {Component} from 'react';
import {connect} from 'react-redux';

import {DateRangePicker} from 'react-dates'
import {setEndDate, setStartDate} from "../actions/filters";

class Filters extends Component {

state = {
    calendarFocused: null
};

onDatesChange = ({startDate, endDate}) => {
    this.props.setStartDate(startDate);
    this.props.setEndDate(endDate);
};

onFocusChange = (calendarFocused) => {
    this.setState(() => ({calendarFocused}));
};

render() {
    return (
        <div>

            {
                <DateRangePicker
                    startDateId="startDate"
                    endDateId="endDate"
                    startDate={this.props.startDate}
                    endDate={this.props.endDate}
                    onDatesChange={this.onDatesChange}
                    focusedInput={this.state.calendarFocused}
                    onFocusChange={this.onFocusChange}
                    showClearDates={true}
                    numberOfMonths={1}
                    isOutsideRange={() => false}
                />
            }

        </div>
    );
   }
}

function mapStateToProps(state) {
   return {
       startDate: state.filters.startDate,
       endDate: state.filters.endDate
   };
  }

function mapDispatchToProps(dispatch) {
   return {
       setStartDate: (startDate) => dispatch(setStartDate(startDate)),
       setEndDate: (endDate) => dispatch(setEndDate(endDate)),
   };
}

export default connect(mapStateToProps, mapDispatchToProps)(Filters);

Действия: 

// SET_START_DATE
export const setStartDate = (startDate) => ({
    type: 'SET_START_DATE',
    startDate
});

// SET_END_DATE
export const setEndDate = (endDate) => ({
    type: 'SET_END_DATE',
    endDate
});

Переходники: 

import moment from 'moment';

const filtersReducerDefaultState = {
    startDate: moment().startOf('month'),
    endDate: moment().endOf('month')
};

export default (state = filtersReducerDefaultState, action) => {
    switch (action.type) {

        case 'SET_START_DATE': {

            console.log(action.startDate);

            return {
                ...state,
                startDate: action.startDate
            }
        }

        case 'SET_END_DATE': {
            return {
                ...state,
                endDate: action.endDate
            }
        }

        default:
            return state;

    }
};

Я использую следующие зависимости:

  • «реагировать»: «^ 16.4.2»,
  • "даты реакции": "^ 17.2.0",
  • "Reaction-Redux": "^ 5.0.7",
  • "redux": "^ 4.0.0",
  • "redux-thunk": "^ 2.3.0"
...