Кодирование | AWS и React
Подключение аутентификации Cognito от Amplify к вашему Redux Store
Расширенное руководство, в котором используются такие инструменты, как Amplify Hub и Redux Toolkit, для прослушивания событий аутентификации и немедленного обновления нашего магазина Redux.
Предварительные условия
Существует множество руководств по началу работы от React, AWS Amplify и Redux Toolkit. Вместо того, чтобы изобретать велосипед, это руководство ориентировано на разработчиков, уже знакомых с этими тремя концепциями: вам понадобится (1) приложение React, (2) подключите свое приложение к Amplify, (3) уже настройте аутентификацию и (4) включить Redux Toolkit. Те, кого нет в этом месте, могут воспользоваться документами, чтобы наверстать упущенное и вернуться, когда будете готовы!
Конфигурация магазина
Хорошо, у вас должен быть файл store.js в вашем основном каталоге. В этом файле у вас будет магазин, который вы экспортируете. Давайте посмотрим, как добавить в этот файл Amplify Hub, который представляет собой систему событий, созданную Amplify.
Если вы добавите следующий фрагмент в свой проект и откроете свои журналы, вы должны увидеть объект со свойством Channel. Скорее всего, оно будет иметь значение auth или core. Amplify’s Hub содержит защищенные каналы с названиями core, auth, api, analytics, interactions, pubsub, storage и datastore.
Фрагмент магазина, основанный на упрощении настройки магазина с помощью configureStore .
import { configureStore } from '@reduxjs/toolkit'
import { Hub } from 'aws-amplify'
const rootReducer = combineReducers()
const store = configureStore({
reducer: rootReducer,
})
Hub.listen(/.*/, (data) => {
console.log('Listening for all messages: ', data)
})
export default store
Прослушиватель аутентификации
Первый шаг показал нам, как прослушивать все события. В этой статье мы сосредоточимся на канале auth. Для этого мы переключимся с предыдущего фрагмента на прослушивание всего с помощью /.*/ и изменим его на просто auth. Каждый канал имеет свой набор events…
