CODEWITHSUNDEEP
javascriptreact-reduxreact-hooks
behappy8
behappy8

Reputation: 61

Redux action return the undefined

Question

Hello, I new on redux. I want to store the date range (startDate and endDate) on store. As you see below image, 'start, end' value is returned on the console well, But the Problem is, data doesn't store on action. It keep show, null and undefined.
Can you give me a advise to solving these?

Attachment

enter image description here

Type.js

export const BookingActionType = {

  BOOKING_CALENDER_DATE: 'BOOKING_CALENDER_DATE',
}

Action

export const getCalenderDate = ({ start, end }) => ({
  type: BookingActionType.BOOKING_CALENDER_DATE,
  payload: { start, end },
});

Reducer.js

const INITIAL_STATE = {
  collection: BOOKING_TYPE_DATA,
  hidden: true,
  guest: 0,
  adult: 0,
  infant: 0,
  startDay: null,
  endDay: null,
};

const bookingReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case BookingActionType.BOOKING_CALENDER_DATE:
      return {
        ...state,
        startDay: action.value !== undefined ? action.value : state.startDay,
        endDay: action.value !== undefined ? action.value : state.endDay,
      };

component

function Calender({ props, getUserDate }) {
  const [startDate, setStartDate] = useState(moment);
  const [endDate, setEndDate] = useState(moment);
  const [focusedInput, setFocusedInput] = useState(null);

  const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);

    let start = new Date(startDate).toLocaleDateString();
    let end = new Date(endDate).toLocaleDateString();
    console.log(start, end);
    console.log(typeof start);
    getUserDate(start, end);
  };

  return (
    <div>
      <DateRangePicker
        startDate={startDate}
        startDateId="start_date_id" 
        endDate={endDate} 
        endDateId="end_date_id" 
        onDatesChange={handleDatesChange} 
        customArrowIcon={true}
        noBorder={true}
        block={true}
        focusedInput={focusedInput} 
        onFocusChange={focusedInput => setFocusedInput(focusedInput)} 
      />
    </div>
  );
}

const mapDispatchToProps = dispatch => ({
  getUserDate: (start, end) => dispatch(getCalenderDate(start, end)),
});
export default connect(null, mapDispatchToProps)(Calender);

Upvotes: 0

Views: 45

Answers (1)

Sulman Azhar
Sulman Azhar

Reputation: 1079

In your reducer.js file, you are setting the start and end date using action.value.

Instead, it should be action.payload. Also in your action function is expecting variables not an object so replace ({start,end}) with (start,end). also I did some more improvements I hope they help

Copy-paste this code and it should work

Action

export const getCalenderDate = (start, end) => ({
  type: BookingActionType.BOOKING_CALENDER_DATE,
  payload: { start, end },
});

Reducer.js

const INITIAL_STATE = {
  collection: BOOKING_TYPE_DATA,
  hidden: true,
  guest: 0,
  adult: 0,
  infant: 0,
  startDay: null,
  endDay: null,
};

    const bookingReducer = (state = INITIAL_STATE, action) => {
      switch (action.type) {
        case BookingActionType.BOOKING_CALENDER_DATE:
          return {
            ...state,
            startDay: action.payload ? action.payload.start : state.booking.startDay,
            endDay: action.payload ? action.payload.end : state.booking.endDay,
          };
        }
     }

Upvotes: 2

Related Questions