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所有性能優勢。