从 redux 中的 reducer 取回 ID
Getting a ID back from a reducer in redux
我是新手,正在尝试使用 React 和 redux 构建一个简单的书签应用程序。
我无法解决这个问题:
用户可以创建一个书签并将其添加到多个文件夹。因此,我发送一个 addMark(bookmark)
操作,然后发送 addMark(folder)
或 editFolder(folder)
(如果该文件夹已存在)。如您所见,书签和文件夹是通过相同的操作添加的,因为在我的状态树中它们都只是 marks - 通过它们的类型区分 属性.
我的问题:如何告诉文件夹对象哪个是要添加到文件夹书签列表的新书签?如何在两次调度之间检索新创建的书签的ID?
我觉得不满意的解决方案:
- 我知道 bookmark-ID 是如何在 reducer 中生成的(通过
Math.max
在现有的书签 ID 上),所以我可以在 2 dispatches.This 之间重现新的书签 ID 听起来像坏黑客。
- 书签和文件夹保存在相同的状态分支(相同的 reducer)中,因为它们都是 "Marks",我可以有一个引用最新添加的书签的状态-属性,但这听起来也很糟糕。
一点点源码,了解一下我所拥有的:
// 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);
还有 Inside 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));
我找不到满意的解决方案。
Reducer 只是在操纵您商店的实例。您可以使用 getState()
获取您当前状态的快照
我认为你应该在这里只发送一个操作: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;
}
我是新手,正在尝试使用 React 和 redux 构建一个简单的书签应用程序。
我无法解决这个问题:
用户可以创建一个书签并将其添加到多个文件夹。因此,我发送一个 addMark(bookmark)
操作,然后发送 addMark(folder)
或 editFolder(folder)
(如果该文件夹已存在)。如您所见,书签和文件夹是通过相同的操作添加的,因为在我的状态树中它们都只是 marks - 通过它们的类型区分 属性.
我的问题:如何告诉文件夹对象哪个是要添加到文件夹书签列表的新书签?如何在两次调度之间检索新创建的书签的ID?
我觉得不满意的解决方案:
- 我知道 bookmark-ID 是如何在 reducer 中生成的(通过
Math.max
在现有的书签 ID 上),所以我可以在 2 dispatches.This 之间重现新的书签 ID 听起来像坏黑客。 - 书签和文件夹保存在相同的状态分支(相同的 reducer)中,因为它们都是 "Marks",我可以有一个引用最新添加的书签的状态-属性,但这听起来也很糟糕。
一点点源码,了解一下我所拥有的:
// 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);
还有 Inside 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));
我找不到满意的解决方案。
Reducer 只是在操纵您商店的实例。您可以使用 getState()
获取您当前状态的快照我认为你应该在这里只发送一个操作: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;
}