Упростите оптимистичный рендеринг с помощью библиотеки redux-optimist

Библиотека redux-optimist мне очень помогла, и я хотел бы поделиться ею с вами. Я разработал простое руководство, в котором расскажу, как настроить и использовать промежуточное ПО. В качестве демонстрационной практики мы собираемся использовать прекрасный Pokémon API. Мы принесем этого Пикачу и оптимистично передадим его Райчу. Если запрос не удастся, мы вернемся к Пикачу.

  1. Давайте установим нужные нам зависимости в ваш терминал:
    yarn create react-app app-name
    cd app-name
    yarn add react-dom
    yarn add react-router-dom
    yarn add react-redux
    yarn add redux
    yarn add redux-thunk
    yarn add lodash
  2. Следуйте инструкциям по настройке Redux или переходите к шагу 3, если у вас есть собственная предпочтительная настройка Redux.

a. open src/index.js

б. Создайте файл действия в своем терминале: touch src/pokemonActions.js && open src/pokemonActions.js

c. Создайте файл редуктора в своем терминале: touch src/reducer.js && open src/reducer.js

d. open src/App.js

e. open src/App.css

3. Давайте сейчас установим redux-optimist в ваш терминал:
yarn add redux-optimist

4. Предлагаю совершить здесь; таким образом вы можете увидеть свой git diff до реализации redux-optimist и после redux-optimist:
git add . && git commit -m "feat(redux): finished setting up redux"

5. Измените наш pokemonActions.js, чтобы создать новые действия и передать часть ответственности библиотеке redux-optimist:

6. Создайте папку middleware и создайте этот файл getRaichu.js внутри папки в вашем терминале: mkdir src/middleware && touch src/middleware/getRaichu.js && open src/middleware/getRaichu.js

7. Импортируйте и используйте промежуточное ПО getRaichu.js в нашем index.js:

8. Измените наш reducer.js для работы с новыми действиями и промежуточным ПО:

9. Теперь в терминале введите yarn start и откройте консоль. Я поместил пару console.log, чтобы наблюдать за процедурой нашего действия, промежуточного программного обеспечения и редуктора.

Вы заметите, что объект в GET_RAICHU_BEGIN - это имитация Райчу, где я предоставил только имя и изображение. Затем, когда запрос завершается успешно, GET_RAICHU_COMPLETE отправляет полный объект, возвращенный из API, для обновления нашего магазина.

10. Теперь давайте имитируем неудавшийся запрос, прокомментировав запрос на выборку в строке 32 в getRaichu.js и комментируя в строке 33.

На этот раз вы увидите, что мы оптимистично обрабатываем Raichu до тех пор, пока запрос не вернется с ошибкой. Магазин автоматически вернется к Пикачу. В это время мы также фиксируем ошибку из неудавшегося запроса и отображаем ее пользователю. Итак, мораль истории, не развивайте своего Пикачу :)

Вот скриншоты git diff от нашего обычного Redux до реализации redux-optimist:

Вот и все для оптимистичного рендеринга с библиотекой redux-optimist! Надеюсь, это было полезно!

Если вам это понравилось, посмотрите мою последнюю серию: Научитесь программировать в многопользовательской игре.

Я также провожу репетиторство в первый понедельник каждого месяца на Meetup.

Найдите меня на Youtube и Twitch, чтобы получить больше информации для разработчиков!