从 redux 中的 reducer 取回 ID [英] Getting a ID back from a reducer in redux

问题描述

我是新手，正在尝试使用 react & 构建一个简单的书签应用程序.还原.

I'm fairly new and trying to build a simple bookmark application with react & redux.

我无法解决这个问题:

用户可以创建一个书签并将其添加到多个文件夹.所以我调度一个 addMark(bookmark) 动作，然后在 addMark(folder) 或 editFolder(folder) 之后，如果文件夹已经存在.如您所见，书签和文件夹是通过相同的操作添加的，因为在我的状态树中，它们都只是标记 - 通过它们的类型属性进行区分.

A user can create one bookmark and add it to multiple folders. So I dispatch an addMark(bookmark) action, and after that addMark(folder) or editFolder(folder) if the folder already exists. As you can see, bookmark and folder are added via the same action, because in my state tree they are both just marks - distinguished by their type property.

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

My problem: How can I tell the folder-objects which is the new bookmark to add to folders list of bookmarks? How can I retrieve the ID of the newly created bookmark between the two dispatches?

我不满意的解决方案:

1. 我知道如何在 reducer 中生成书签 ID(通过 Math.max 在现有书签 ID 上生成)，因此我可以在 2 个分派之间重现新书签 ID.这听起来像一个糟糕的黑客.
2. 书签和文件夹保存在同一个状态分支(同一个减速器)中，因为它们都只是标记"，我可以有一个引用最新添加的书签的状态属性，但这听起来也很糟糕.

1. I know how the bookmark-ID is generated in the reducer (via Math.max over the existing bookmark IDs), so I can reproduce the new bookmark ID between the 2 dispatches.This sounds like a bad hack.
2. Bookmarks and folders are kept in the same state-branch (same reducer), because they are both just "Marks", I could have a state-property that references the latest added bookmark, but this also sounds like a bad hack.

一点源代码，以了解我所拥有的:

A little bit of source code, to understand what I have:

// 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，也就是容器组件:

And Inside AddMark, which is the container component:

// 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));

我找不到满意的解决方案.

I can't find a satisfying solution for this.

推荐答案

我认为你应该在这里只调度一个动作:addBookmark()，它接受书签对象和文件夹.

I think that you should dispatch only one action here: addBookmark(), which accepts both bookmark object and folder.

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

Your code, which handles adding bookmark object into folder should be part of reducer.

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

Also, refer the Todos example in Redux project. It has id provided in action creation to make it possible to read it in the component. You can also use current state to compute latest 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 中间件来分派这些操作.

Notice that example requires redux-thunk middleware to dispatch those actions.

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

Then you can get access to bookmark with id in the folders reducer

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;
} 

这篇关于从 redux 中的 reducer 取回 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！