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

Question

我有 reducer :

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

我正在提交我的表单，他们发送了一个将数据保存到 redux 中的操作:

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

目前一切顺利，我可以保存数据，但如何将其加载到我的表单中？

在我的表单所在的组件中，我尝试了这样的事情:

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) : '')

但我收到“格式的无效时间值”错误(我的开始和结束日期输入来自 react-datepicker)

将 redux 数据加载到表单中的正确方法是什么？

Answer 1

如果您想调用调度并更新您的商店，您应该在您的表格中添加此行；

首先添加了bindActionCreators和connect；

import { connect } from "react-redux";

import { bindActionCreators } from "redux";

然后对mapStateToProps、mapDispatchToProps使用connect方法；

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

现在你应该像这样定义 mapStateToProps, mapDispatchToProps;

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

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

现在您可以使用 setCmpDates 更改您的商店，或者您可以使用 getCmpDates 读取日期。