Redux — обновление магазина на основе асинхронных вызовов API

Question

У меня есть вариант использования для рендеринга страницы с использованием избыточности с вызовами API-интерфейса graphql.

В первом компоненте вызовет действие по умолчанию для извлечения данных из graphql и сохранит в состоянии избыточности, как показано ниже.

      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'
                        }
                      ]
                 }
         }

и покажет пользовательский интерфейс, как показано ниже , скриншот пользовательского интерфейса демонстрационного приложения Films.

После размещения в отдельном компоненте (Film) я должен сделать служебный вызов, чтобы получить информацию о фильме по идентификатору (эти вызовы будут асинхронными для извлечения данных и должны храниться в состоянии.

Получит данные, как показано ниже

      { "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"
   ]
  }
}

}

Теперь мне нужно обновить свое состояние, как показано ниже, чтобы я мог отображать все данные о фильме в отдельном компоненте (Film).

      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"
                         ]
                    }
                  ]
             }
     }

Когда я пытаюсь выполнить действие для извлечения фильма по идентификатору (асинхронные вызовы с использованием промежуточного программного обеспечения API) в компоненте Film, его вызов и попытка обновления, но все действия зацикливаются и не работают должным образом.

Пожалуйста, помогите мне правильно понять и использовать избыточные действия.

App Codesandbox 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, написанное от руки промежуточное ПО (по крайней мере, в случае, подобном вашему), неизменяемая логика редьюсера или написанные от руки создатели действий — все это с 2019 года. Учебник, которому вы следуете, сильно устарел, и проблемы, с которыми вы сталкиваетесь прямо сейчас, не будут проблемами. для вас, если вы идете с современным стилем.

Пожалуйста, сделайте себе одолжение и следуйте официальному туториалу Redux. Он также охватывает получение данных из API в главах 5, 7 и 8.