ReactJS - Proper way to fetch data from redux and load form

Question

I have the reducer:

const INITIAL_STATE = {
  campaign_dates: {
    dt_start: '',
    dt_end: '',
  },

I am submiting my form and them send an action to save the data into redux:

  function onSubmit(data) {
    dispatch(addCampaignDatesAction(data))
  }

So far so good, I'm able to save the data, but how can I load it in my form?

In my component where my form is, I tried something like this:

const getCampaignDatesFromState = useSelector(
    state => state.createCampaign.campaign_dates,
  )

const [startDate, setStartDate] = useState(getCampaignDatesFromState.dt_start !== '' ? new Date(getCampaignDatesFromState.dt_start) : '')

const [endDate, setEndDate] = useState(getCampaignDatesFromState !== '' ? new Date(getCampaignDatesFromState.dt_end) : '')

But I'm getting "Invalid time value at format" error (my start and end date inputs is from react-datepicker)

What is the proper way to load redux data into your form?

I'm using react hooks, tried with useEffect but same error pops up — fjurr
– fjurr, Commented Dec 30, 2019 at 13:07
The problem looks like time format related, but not react-redux. console.log(getCampaignDatesFromState) and check it's format. — SuleymanSah
– SuleymanSah, Commented Dec 30, 2019 at 13:10
I got it, I was passing an object, when I just separate them with const startCampaignDate = useSelector( state => state.createCampaign.campaign_dates.dt_start, ) its working now. Thanks @SuleymanSah — fjurr
– fjurr, Commented Dec 30, 2019 at 14:13

Emre Gürbulak · Accepted Answer · 2019-12-30 13:28:43Z

2

İf you want to call dispatch and update your store you sould add this lines on your form ;

Firstly added bindActionCreators and connect;

import { connect } from "react-redux";

import { bindActionCreators } from "redux";

and then use connect method for mapStateToProps, mapDispatchToProps;

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

now you sould define mapStateToProps, mapDispatchToProps like this;

const mapStateToProps = state => ({
  getCmpDates: state.campaign_dates
});

const mapDispatchToProps = dispatch => ({
  setCmpDates: bindActionCreators(campaign_dates, dispatch),
});

and now you can change your store with setCmpDates or you can read dates with getCmpDates.

edited Dec 30, 2019 at 13:28

answered Dec 30, 2019 at 13:19

Emre Gürbulak

935 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Bradshaw · Accepted Answer · 2019-12-30 13:11:31Z

1

You need to use the connect() method from the react-redux library. This does also contain some hooks, but you are better off avoiding them, as they can create some strange problems and you loose all the performance benefits of connect.

answered Dec 30, 2019 at 13:11

David Bradshaw

13.2k3 gold badges45 silver badges76 bronze badges

1 Comment

SuleymanSah Over a year ago

@fjurr you don't need to use connect. There is nothing wrong with the new hooks style react-redux.

Collectives™ on Stack Overflow

ReactJS - Proper way to fetch data from redux and load form

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related