基于异步api调用的Redux更新存储

Question

我有一个用例来使用redux和graphql调用来呈现页面。

在第一个组件上，将调用默认操作从graphql获取数据，并以redux状态存储，如下所示

state = { films: {
               totalCount: 6,
               films: [
                        {
                          created: '2014-12-10T14:23:31.880000Z',
                          id: 'ZmlsbXM6MQ==',
                          director: 'George Lucas',
                          title: 'A New Hope'
                        },
                        {
                          created: '2014-12-12T11:26:24.656000Z',
                          id: 'ZmlsbXM6Mg==',
                          director: 'Irvin Kershner',
                          title: 'The Empire Strikes Back'
                        },
                        {
                          created: '2014-12-18T10:39:33.255000Z',
                          id: 'ZmlsbXM6Mw==',
                          director: 'Richard Marquand',
                          title: 'Return of the Jedi'
                        }
                      ]
                 }
         }

，并将在电影演示应用UI屏幕截图下面显示UI

一旦放在单独的组件(胶片)中，我就必须进行服务调用，以便通过id获取电影细节(这个调用将是异步的，以获取数据，并且必须存储在状态中。

将获得如下数据

{ "data": {
"film": {
  "id": "ZmlsbXM6NQ==",
  "title": "Attack of the Clones",
  "created": "2014-12-20T10:57:57.886000Z",
  "director": "George Lucas",
  "releaseDate": "2002-05-16",
  "episodeID": 2,
  "openingCrawl": "There is unrest in the Galactic\r\nSenate. Several thousand solar\r\nsystems have declared their\r\nintentions to leave the Republic.\r\n\r\nSenator Amidala, the former\r\nQueen of Naboo, is returning\r\nto the Galactic Senate to vote\r\non the critical issue of creating\r\nan ARMY OF THE REPUBLIC\r\nto assist the overwhelmed\r\nJedi....",
  "producers": [
    "Rick McCallum"
   ]
  }
}

}

现在我必须像下面这样更新我的状态，这样我就可以在单独的(电影)组件中显示所有的电影数据。

state = { films: {
           totalCount: 6,
           films: [
                    {
                      "id": "ZmlsbXM6NQ==",
                      "title": "Attack of the Clones",
                      "created": "2014-12-20T10:57:57.886000Z",
                      "director": "George Lucas",
                      "releaseDate": "2002-05-16",
                      "episodeID": 2,
                      "openingCrawl": "There is unrest in the Galactic\r\nSenate. Several thousand solar\r\nsystems have declared their\r\nintentions to leave the Republic.\r\n\r\nSenator Amidala, the former\r\nQueen of Naboo, is returning\r\nto the Galactic Senate to vote\r\non the critical issue of creating\r\nan ARMY OF THE REPUBLIC\r\nto assist the overwhelmed\r\nJedi....",
                      "producers": [
                               "Rick McCallum"
                         ]
                    },
                    {
                      "id": "ZmlsbXM6Mg==",
                      "title": "The Empire Strikes Back",
                      "created": "2014-12-12T11:26:24.656000Z",
                      "director": "Irvin Kershner",
                      "releaseDate": "2002-05-16",
                      "episodeID": 2,
                      "openingCrawl": "There is unrest in the Galactic\r\nSenate. Several thousand solar\r\nsystems have declared their\r\nintentions to leave the Republic.\r\n\r\nSenator Amidala, the former\r\nQueen of Naboo, is returning\r\nto the Galactic Senate to vote\r\non the critical issue of creating\r\nan ARMY OF THE REPUBLIC\r\nto assist the overwhelmed\r\nJedi....",
                      "producers": [
                               "Rick McCallum"
                         ]
                    },
                    {
                      "id": "ZmlsbXM6Mw==",
                      "title": "Return of the Jedi",
                      "created": "2014-12-18T10:39:33.255000Z",
                      "director": "Richard Marquand",
                      "releaseDate": "2002-05-16",
                      "episodeID": 2,
                      "openingCrawl": "There is unrest in the Galactic\r\nSenate. Several thousand solar\r\nsystems have declared their\r\nintentions to leave the Republic.\r\n\r\nSenator Amidala, the former\r\nQueen of Naboo, is returning\r\nto the Galactic Senate to vote\r\non the critical issue of creating\r\nan ARMY OF THE REPUBLIC\r\nto assist the overwhelmed\r\nJedi....",
                      "producers": [
                               "Rick McCallum"
                         ]
                    }
                  ]
             }
     }

当我试图在Film中通过id (使用api中间件的异步调用)获取Film时，它的调用和试图更新，但是所有的操作都是循环的，不能正常工作。

请帮助我正确理解和使用redux动作。

应用程序代码框链接https://codesandbox.io/s/adoring-jang-bf2f8m验证控制台日志，可以看到操作循环.

谢谢。

更新：：将上面的应用程序更新为@redux/toolkit，下面是ref url https://codesandbox.io/s/react-rtk-with-graphql-9bl8q7

Answer 1

您在这里使用的是一种非常过时的Redux样式，它将使您在没有任何好处的情况下编写4倍的代码--现代的Redux没有ACTION_TYPE常量、switch..case reducers、手写中间件(至少在像您这样的情况下)、不变的还原逻辑或手写的动作创建者--所有这些都是自2019年以来的。您所遵循的教程是非常过时的，如果您采用现代风格，您现在所面临的问题将不会成为您的问题。

请帮你自己一个忙，跟着官方Redux教程走。它还包括从第5、7和8章中的apis获取数据。