Упростите оптимистичный рендеринг с помощью библиотеки redux-optimist
Библиотека redux-optimist мне очень помогла, и я хотел бы поделиться ею с вами. Я разработал простое руководство, в котором расскажу, как настроить и использовать промежуточное ПО. В качестве демонстрационной практики мы собираемся использовать прекрасный Pokémon API. Мы принесем этого Пикачу и оптимистично передадим его Райчу. Если запрос не удастся, мы вернемся к Пикачу.
- Давайте установим нужные нам зависимости в ваш терминал:
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
- Следуйте инструкциям по настройке 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, чтобы получить больше информации для разработчиков!