从redux中的reducer获取ID

Posted 2023-02-22

【中文标题】从redux中的reducer获取ID

【英文标题】：Getting a ID back from a reducer in redux

【发布时间】：2016-10-06 10:39:34

【问题描述】：

我是新手，正在尝试使用 react 和 redux 构建一个简单的书签应用程序。

我无法解决这个问题：

用户可以创建一个书签并将其添加到多个文件夹。所以我发送一个addMark(bookmark) 操作，然后在该文件夹已经存在的情况下发送addMark(folder) 或editFolder(folder)。如您所见，书签和文件夹是通过相同的操作添加的，因为在我的状态树中它们都只是 标记 - 由它们的 type 属性区分。

我的问题：如何告诉文件夹对象哪个是要添加到书签文件夹列表的新书签？如何在两次调度之间检索新创建的书签的 ID？

我不满意的解决方案：

我知道如何在 reducer 中生成书签 ID（通过 Math.max 覆盖现有的书签 ID），因此我可以在两次调度之间重现新的书签 ID。这听起来像是一个糟糕的 hack。 书签和文件夹保存在同一个状态分支（同一个减速器）中，因为它们都只是“标记”，我可以拥有一个引用最新添加的书签的状态属性，但这听起来也很糟糕.

一点点源代码，了解一下我有什么：

// mapping between dispatcher and props to my react view
const mapDispatchToProps = (dispatch) => (
  saveMark: (mark) => 
    if (mark.id) 
      dispatch(editMark(mark));
     else 
      dispatch(addMark(mark));
    
  ,
);
export default connect(mapStateToProps, mapDispatchToProps)(AddMark);

还有AddMark里面，也就是容器组件：

// save the bookmark first
this.props.saveMark(
      type: 'bookmark',
      title: this.state.title,
      url: this.state.url,
      icon: this.props.icon,
      style: this.state.style,
 );
 // now I need the bookmark ID
 folders.forEach(folder => 
    folder.children.push(bookmarkID) // <-- !!!
 );
 folders.forEach(folder => this.props.saveMark(folder));

我找不到令人满意的解决方案。

【问题讨论】：

为什么不让你的addMark 函数接受两个变量；文件夹和书签。

【参考方案1】：

我认为你应该在这里只发送一个动作：addBookmark()，它接受书签对象和文件夹。

处理将书签对象添加到文件夹的代码应该是 reducer 的一部分。

另外，请参考 Redux 项目中的 Todos example。它在动作创建中提供了 id，以便可以在组件中读取它。您还可以使用当前状态来计算最新的 id：

function addBookmark(bookmark, folder) 
   return (dispatch, getState) => 
       const newBookmark = Object.assign(
         id: Math.max(0, ...getState().bookmarks.map(b => b.id)) + 1,
       , bookmark);
       dispatch(
         type: 'ADD_BOOKMARK',
         bookmark: newBookmark,
         folder: folder
       );
   

请注意，该示例需要 redux-thunk 中间件来调度这些操作。

然后你可以访问文件夹reducer中带有id的书签

function folderReducer(state = [], action) 
  if(action.type === 'ADD_BOOKMARK') 
     return state.map(folder => 
       if(folder === action.folder) 
         return Object.assign(, folder, children: [...folder.children, action.bookmark.id]
       
       return folder;
     )
  
  //another reducer code
  return state;
 

【讨论】：

抱歉耽搁了这么久，但这正是我想要的！我不知道内部函数的第二个参数（getState）。

【参考方案2】：

Reducer 只是在操纵您商店的实例。您可以使用 getState()

获取当前状态的快照