Redux

Question

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

第一个组件将调用默认操作从 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 Films demo app UI screenshot

一旦放置在单个组件（电影）中，我必须进行服务调用以通过 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 操作。

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

谢谢。

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

Answer 1

你在这里使用了一种非常过时的 Redux 风格，这将使你编写 4 倍的代码而没有任何好处 - 现代 Redux 没有 ACTION_TYPE 常量，switch..case reducers，hand-written 中间件（至少在像你这样的情况下）、不可变的 reducer 逻辑或 hand-written 动作创建者——所有这些都是自 2019 年以来的。你正在学习的教程已经非常过时了，你现在面临的问题不会成为问题如果你喜欢现代风格。

请帮自己一个忙，去关注official Redux tutorial。它还涵盖了在第 5、7 和 8 章中从 api 获取数据。

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

Redux - updating store based on async api calls

redux-thunk

react-redux

redux-middleware

redux-async-actions