小编Luí*_*dge的帖子

使用Redux获取数据时如何避免竞争条件?

我们有一个提取对象异步的动作,让我们调用它getPostDetails,它接受一个由id获取的帖子的参数.向用户显示帖子列表,可以单击其中一个以获取一些详细信息.

如果用户点击"发布#1",我们会发送一个GET_POST可能看起来像这样的动作.

const getPostDetails = (id) => ({
  type: c.GET_POST_DETAILS,
  promise: (http) => http.get(`http://example.com/posts/#${id}`),
  returnKey: 'facebookData'
})
Run Code Online (Sandbox Code Playgroud)

这是由中间件选择的,它为promise添加了一个成功处理程序,它将调用GET_POST__OK与反序列化的JSON对象类似的操作 .reducer看到这个对象并将其应用于商店.典型的 __OK减速机看起来像这样.

[c.GET_ALL__OK]: (state, response) => assign(state, {
  currentPost: response.postDetails
})
Run Code Online (Sandbox Code Playgroud)

后来我们有了一个组件,可以查看currentPost并显示当前帖子的详细信息.

但是,我们有竞争条件.如果用户一个接一个地提交两个GET_POST_DETAILS动作,则无法保证我们接收__OK动作的顺序,如果第二个http请求在第一个http请求之前完成,则状态将变为不正确.

    Action                   => Result
    ---------------------------------------------------------------------------------
|T| User Clicks Post #1      => GET_POST for #1 dispatched => Http Request #1 pending
|i| User Clicks Post #2      => GET_POST for #2 dispatched => Http Request #2 pending
|m| Http …
Run Code Online (Sandbox Code Playgroud)

javascript redux

44
推荐指数
2
解决办法
8959
查看次数

标签 统计

javascript ×1

redux ×1