在这个例子中数据是如何被解构的？答案

【问题标题】：how the data is destructured in this example?在这个例子中数据是如何被解构的？
【发布时间】：2020-12-11 05:40:44
【问题描述】：

我正在按照文章制作项目日记应用程序。它使用 redux 工具包和 miraj 作为假服务器。它有一个名为 Editor 的组件

 const Editor: FC = () => {
  const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(
    (state: RootState) => state.editor
  );
  const [editedEntry, updateEditedEntry] = useState(entry);
  const dispatch = useAppDispatch();

  const saveEntry = async () => {
    if (activeDiaryId == null) {
      return showAlert('Please select a diary.', 'warning');
    }
    if (entry == null) {
      http
        .post<Entry, { diary: Diary; entry: Entry }>(
          `/diaries/entry/${activeDiaryId}`,
          editedEntry
        )
        .then((data) => {
          if (data != null) {
            const { diary, entry: _entry } = data;
            dispatch(setCurrentlyEditing(_entry));
            dispatch(updateDiary(diary));
          }
        });

作为一个新手，我无法理解以下内容：

enter code here const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(

在这一行中我理解的条目是一个类型。但是文章中没有条目的类型或接口。第二个

 .post<Entry, { diary: Diary; entry: Entry }>(
          `/diaries/entry/${activeDiaryId}`,

我们正在发出一个 post 请求，在 miraj 服务器中，我们将路由定义为：

this.post('/diaries/entry/:id', diary.addEntry);

我不明白这个 :id 部分。我们如何在这里获取 id？

最后一件事:)在这一行：常量 { 日记，条目：_entry } = 数据；调度（setCurrentlyEditing（_entry））；为什么输入前有下划线？和上面一样的问题是它是打字稿的类型还是我不知道的一些解构方法。

【问题讨论】：

这是我关注smashingmagazine.com/2020/08/redux-real-world-application的文章

标签： reactjs typescript redux react-redux miragejs

【解决方案1】：

code here const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(
在这一行中我理解的条目是一个类型。但没有类型或者文章中的入口界面。第二个

不，这不是一个类型。这是重命名解构属性的 JS 术语。该代码只是将currentlyEditing 重命名为entry。 const { diary, entry: _entry } = data 也是如此，因此 dispatch(setCurrentlyEditing(_entry))。

this.post('/diaries/entry/:id', diary.addEntry);
我不明白这个 :id 部分。我们如何在这里获取 id？

这基本上是一个占位符，用于检索您从 URL 中收集的动态参数，例如，如果 URL 是 http://www.website.org/diaries/entry/123，然后是 id=123，mirage 会自动从路由中解析出来。请参考文档部分here

【讨论】：