Поскольку у меня многолетний опыт работы в розничной торговле, я знал, что хочу создать приложение, относящееся к этой теме. Я создал приложение для покупки продуктов, которое дает пользователю возможность вводить имя, просматривать продукты и добавлять их в корзину. Затем корзина дает пользователю общую сумму и возможность удалить продукты из своей корзины.
Я начал создавать это приложение, используя команду create-react-app для структурирования моего внешнего интерфейса. Это создает скелет для реагирующего приложения. После выполнения этой команды я инициализировал менеджер пакетов узла, запустив npm install. После установки npm я запустил команду npm start, чтобы убедиться, что мое приложение создано правильно и будет правильно работать в браузере.
После того, как приложение заработало должным образом, я приступил к созданию своего Rails API. Я начал с миграции, чтобы создать таблицы для пользователей и продуктов, которые мне нужны. После миграции и создания моей схемы я записал некоторые начальные данные. Я заполнил свои таблицы, чтобы можно было поиграться с данными. Как только мои таблицы были заполнены некоторыми данными, я создал свои модели для пользователей и продуктов. Сначала я создал модель тележки, но столкнулся со многими проблемами ассоциации ActiveRecord. Текущие модели для пользователя и продуктов не имеют текущей связи. После создания моделей я создал контроллеры и маршруты, чтобы у меня были конечные точки для моего API для доступа к данным с сервера. Эти конечные точки содержат объекты JSON, к которым мой интерфейс сможет получить доступ с помощью промежуточного программного обеспечения из библиотеки Redux.
После настройки моего API я начал работать над некоторыми простыми компонентами, убедившись, что они будут правильно отображаться. После того, как у меня было настроено несколько компонентов, я захотел получить свои данные из моего API. Я начал с создания своих редукторов, которые управляют глобальным состоянием приложения и манипулируют им. Редьюсер — это просто функция, которая принимает начальное состояние и действие в качестве аргументов. Редьюсер использует действия, чтобы определить, что делать с состоянием. Я построил три редуктора, один для пользователя, тележки и продуктов. Затем я использовал метод combReducers из библиотеки Redux, чтобы объединить все мои редукторы в один rootReducer.
После того, как мои редукторы были настроены, мне нужно было создать свой магазин или глобальное состояние. Я использовал метод createStore и compose, а также объект Provider из react-redux и Redux для создания хранилища. Объект Provider делает хранилище Redux доступным для любых вложенных компонентов. Чтобы завершить настройку моего магазина, я создал константу с именем store и использовал метод createStore, переданный в мой rootReducer, и метод compose, чтобы я мог использовать некоторое промежуточное программное обеспечение и Redux DevTools. Передача хранилища поставщику дает моему приложению доступ к хранилищу Redux.
Поскольку редукторы принимают действие в качестве второго аргумента, мне нужно было создать несколько действий, чтобы определить, какие изменения нужно внести в состояние. Я построил действия для продуктов и для пользователя. Я создал три действия для продуктов, включая fetchProducts, addToCart и removeFromCart. Я также создал действие для пользователя findOrCreateUser. Все эти действия используют диспетчеризацию для отправки действия, вызывающего изменение состояния.
Затем мне нужно было получить некоторые данные из моего API. Используя преобразователь промежуточного программного обеспечения Redux, я смог сделать запрос на выборку. Преобразователь позволяет отправить действие для загрузки данных, сделать запрос к API, дождаться ответа и отправить другое действие с этими данными ответа.
Как только я смог получить данные из своего API, я смог сохранить их в магазине. Когда приложение загружается, данные автоматически извлекаются с помощью метода жизненного цикла компонента, называемого componentDidMount, что означает, что всякий раз, когда компонент монтируется в DOM, выполняются строки кода внутри функции.
Я использовал объект Router из библиотеки react-router-dom для создания панели навигации в своем приложении. Внутри объекта Router я написал объекты Navbar, которые указывают точный путь, который может посетить пользователь, и отображают соответствующий компонент. Внутри компонента NavBar я использовал объект NavLink из той же библиотеки для создания ссылок на эти компоненты.
Я устанавливаю два компонента контейнера, один для продуктов и один для корзины, которая будет отображать другой компонент внутри него. Затем я передал реквизиты этим компонентам, используя хранилище с помощью метода подключения в библиотеке react-redux. Метод connect устанавливает связь между компонентом и хранилищем для доступа к данным. Еще один полезный метод передачи реквизитов компоненту — это mapStateToProps, который позволяет сохранять глобальное состояние в виде реквизитов в компоненте, чтобы их можно было передать дочернему компоненту.
Собрав вместе все эти компоненты, я смог создать очень простое и удобное приложение для покупок. Пользователь может добавлять продукты, полученные из API, в свою корзину внутри магазина, а затем также может быть удален. Внутри компонента корзины пользователь также может увидеть общую стоимость всей корзины. В настоящее время нет возможности оформить заказ, но, возможно, в будущем я мог бы реализовать поддельную проверку, чтобы сделать приложение еще более надежным.
