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

Question

我有减速机：

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

如果你想打电话给 dispatch 并更新你的商店，你应该在你的表格上添加这行；

首先添加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 读取日期。

Answer 2

您需要使用react-redux库中的connect()方法。 这也包含一些钩子，但最好避免它们，因为它们会产生一些奇怪的问题，并且会失去connect所有性能优势。