angular - 如何获取新项目ngrx的id

Question

我使用的格式是

{product._id:{product._id:string, product_name:string}, product._id:{product._id:string, product_name:string}}

保存我商店的产品信息

一切正常，加载时我设置了它:

function handleBlogsLoadedAction(state, action) {
    const returnedBlogs = action.payload
    const blogObj = returnedBlogs.reduce(
        (blogs: { [id: string]: Blog }, blog: Blog) => 
                 { 
                    return Object.assign(blogs, { [blog._id]: blog }); 
                 }, {});

    let newState = Object.assign({}, state);
     newState = {
        loaded:true,
        blogs:blogObj
    }
    return newState;
}

所以我最终得到了类似的东西:

{"12345":{product._id:"12345", product_name:"product1"}, "6789":{product._id:"6789", product_name:"product2"}}

我更新和删除了它，但是当涉及到添加时，问题是在创建后获取 id 的最佳方式，这样我就可以插入状态

关键是我不想自己生成id，数据库必须自己做

有没有人知道最佳实践或者只是对如何做到这一点有一些想法

编辑:

很抱歉，问题比上面说明的要复杂一些。

@danday74 的回答是正确的，但我的问题问得不好，我想我应该分享和详细说明，希望能帮助到其他人。

我的商店也使用 websocket 与其他客户端通信，@Effect() beginUpdate$ 监听操作:

BLOG_UPDATE_START_ACTION、BLOG_DELETE_START_ACTION、BLOG_ADD_START_ACTION

当 beginUpdate$ 被触发时，为套接字主题调用下一个方法

this.socketService.socket$.next(JSON.stringify(action))

它携带/发送 Action 到连接的客户端，然后从 beginUpdate$ 分派(dispatch)一个 Action 来更新数据库。

您可以看到这里出现的问题，我需要按照@danday74 所述更新数据库然后将返回的数据发送到商店

所以最后我所做的是调用下一个方法调用，它在一个 do 函数中，并将它添加到进行 HTTP 调用的效果中，所以下一个方法是用服务器的响应调用的

我还设置了监听socket的效果:

@Effect() watchSocket$ = this.socketService.socket$

当通过套接字发送操作时，它会分派(dispatch)更新状态的操作，但现在具有正确的负载。

将 websocket 实现到 ngrx 是一个学习曲线，例如，我最初使用 watchSocket$ 效果返回一个将进行 HTTP 调用的操作，然后分派(dispatch)一个操作来更新状态，

但是因为来自 watchSocket$ 的操作被分派(dispatch)给所有客户端，所以每个客户端都会尝试发出相同的 HTTP 请求，想象一下有 100 个客户端试图删除相同的项目!

所以我分成了 2 个效果，一个是更新数据库(HTTP 请求)

将响应发送到套接字，套接字更新所有连接的商店。

如果有人可以就最佳实践提出任何建议，请随意

//Effects that make HTTP requests
@Effect({dispatch:false}) updateDB$: Observable<any> = this.actions$
.ofType<fromBlogActions.BlogUpdateDBAction>(fromBlogActions.BLOG_UPDATE_DB_ACTION)
    .mergeMap(action =>  {
        console.log(action)
        return this.blogService.updateBlog(action.payload.blog)
    })
    .do((blog:Blog)=> this.socketService.socket$.next(JSON.stringify({type:fromBlogActions.BLOG_UPDATE_START_ACTION, payload:{blog:blog}})))

    @Effect({dispatch:false}) deleteBlogFromDB$: Observable<any> = this.actions$
    .ofType<fromBlogActions.BlogDeleteDBAction>(fromBlogActions.BLOG_DELETE_DB_ACTION)
        .mergeMap(action =>  {     
            console.log(action)
            return this.blogService.deleteBlog(action.payload.blog)
        })
        .do((blog:Blog)=> this.socketService.socket$.next(JSON.stringify({type:fromBlogActions.BLOG_DELETE_START_ACTION, payload:{blog:blog}})))

    @Effect({dispatch:false}) addBlogToDB$: Observable<any> = this.actions$
    .ofType<fromBlogActions.BlogAddToDBAction>(fromBlogActions.BLOG_ADDED_TO_DB_ACTION)
        .mergeMap(action =>  {     
            console.log(action)
            return this.blogService.addBlog(action.payload.blog)
            .catch(()=>{
                return Observable.of({})
            })
        })
        .do((blog:Blog)=> this.socketService.socket$.next(JSON.stringify({type:fromBlogActions.BLOG_ADD_START_ACTION, payload:{blog:blog}})))

// Effects to update state
    @Effect() deleteBlog$: Observable<any> = this.actions$
        .ofType<fromBlogActions.BlogDeletedAction>(fromBlogActions.BLOG_DELETED_ACTION)
        .map((action)=>new fromBlogUIActions.CrudSucessAction(action))

    @Effect() updateBlog$: Observable<any> = this.actions$
        .ofType<fromBlogActions.BlogUpdatedAction>(fromBlogActions.BLOG_UPDATED_ACTION)
        .map((action)=>new fromBlogUIActions.CrudSucessAction(action))


    @Effect() addBlog$: Observable<any> = this.actions$
    .ofType<fromBlogActions.BlogAddedAction>(fromBlogActions.BLOG_ADDED_ACTION)
    .map((action)=>new fromBlogUIActions.CrudSucessAction(action))

// Updates Database (CRUD)
    @Effect() beginUpdate$: Observable<Action> = this.actions$
    .ofType(fromBlogActions.BLOG_UPDATE_START_ACTION, fromBlogActions.BLOG_DELETE_START_ACTION, fromBlogActions.BLOG_ADD_START_ACTION)
    .map((action:any)=>{
           //Update database, but doing it here makes sure it's only done once
        if (action.type === fromBlogActions.BLOG_UPDATE_START_ACTION) {
           return new fromBlogActions.BlogUpdateDBAction(action.payload);
        }
        if (action.type === fromBlogActions.BLOG_DELETE_START_ACTION) {
            return new fromBlogActions.BlogDeleteDBAction(action.payload);
        }
        if (action.type === fromBlogActions.BLOG_ADD_START_ACTION) {
            return new fromBlogActions.BlogAddToDBAction(action.payload);
        }
    })


// Watches websocket
    @Effect() watchSocket$:Observable<any> = this.socketService.socket$
        .map((action : any) => {
            //Update state across clients
            if (action.type === fromBlogActions.BLOG_UPDATE_START_ACTION) {
                return new fromBlogActions.BlogUpdatedAction(action.payload)
            }
            if (action.type === fromBlogActions.BLOG_DELETE_START_ACTION) {
                return new fromBlogActions.BlogDeletedAction(action.payload)
            }
            if (action.type === fromBlogActions.BLOG_ADD_START_ACTION) {
               return new fromBlogActions.BlogAddedAction(action.payload)
            }
        })

Answer 1

所以你有两个 Action :

ADD_PRODUCT_REQUESTED(带负载)

此处的有效负载是 POST 请求的主体(见下文)。第一个操作会触发一个效果，向您的服务器发出后端 POST (CREATE) 请求。当后端请求完成时，效果会触发下面的第二个操作，将响应作为有效负载传递。(可选)第一个操作可能会在没有 ID 的情况下将数据插入存储，这样您就可以开始显示数据，而无需等待 HTTP 请求完成。

ADD_PRODUCT_COMPLETED(带负载)

这会从效果中接收有效负载，并使用相关 ID 将数据插入(或更新)存储中。

PS 你可能还想考虑使用 ngrx/entity 来简化集合的使用。

您可能已经习惯了操作和缩减器。如果您不熟悉 ngrx/effects，这里有一些示例代码可以执行此类操作:

@Effect()
allFiltersRequested$ = this.actions$.pipe(
  ofType<BimRequestedAction>(BimsActionTypes.BimRequested),
  tap((action) => debug(action)),
  mergeMap((action) =>
    // essential to catchError else an HTTP error response will disable this effect
    this.bimService.getBim(action.payload).pipe(
      catchError(() => {
        return of({})
      })
    )
  ),
  map((bim) => new BimLoadedAction(bim))
)

此处 bimService 正在发出 HTTP 请求。