ReactJS - 从 redux 和加载表单中获取数据的正确方法

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?

Answer 1

İ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.

Answer 2

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 .