Разработка приложения под текущие задачи – сложный, но перспективный процесс. Сегодня расскажем как создать структуру приложения пошагово и на практическом примере.
Привет! В предыдущей статье (ссылка) мы с вами заложили первый кирпичик для разработки нашего сервиса. Теперь давайте создадим структуру приложения.
В папке src создадим папки actions, components, reducers, services и файл store.js. Последний нам понадобится для использования redux.
В папке components мы будем размещать все компоненты нашего сервиса. Создадим там папку app и в неё перенесем следующие файлы:
- app.js
- app.css
В файле app.js будет размещаться код компонента, а в app.css расположатся стили компонента.
Также нам понадобится index.js. Он нужен для удобства импорта этого компонента, и будет содержать всего две строки:
Теперь в файле index.js в папке src мы изменим строку импорта компонента App.
меняем на
Теперь попробуем запустить проект, чтобы посмотреть не сделали ли мы ошибку.
Необходимо запустить командную строку. Перейти в папку нашего проекта и ввести команду npmstart.
Должна открыться пустая страница проекта.
Теперь добавим нашему элементу функциональности. Добавим следующий код в компонент App внутрь тега div:
У нас появились поля ввода характеристик для нашего героя.
Чтобы хранить значения, нам необходимо немного изменить элемент, сделав его не функцией, а классом. Для этого импортируем из библиотеки react Component:
Затем модифицируем элемент:
И удалим следующую строку:
Отлично! Теперь App подготовлен для дальнейших манипуляций.
Создадим state, в котором будет храниться состояние объекта. Внутри нашего класса пишем следующее:
Напишем обработчик событий для полей. Он располагается тоже внутри класса:
ev – это событие, которое мы получим от input. changeInput – имя поля, значение которого мы изменяем. setState – функция, которая изменяет state. Так как менять состояние напрямую нельзя, мы возвращаем копию состояния (которую получаем с помощью spread-оператора) и новое значение поля.
В каждом поле ввода перед закрывающим слешем добавим:
onChange — обработчик события будет вызывать функцию onChangeInput, и передавать ей само событие и имя поля которое изменяем в state.
для поля strength в state мы передаем ‘strength’и т.д.
Теперь, при любом изменении любого поля изменения попадают в наш локальный state.
Давайте проверим, что все именно так. Используем метод жизненного цикла компонента componentDidUpdate(). Данный метод вызывается, когда компонент должен обновиться.
Напишем его внутри нашего класса:
Открываем браузер и видим, что при каждом изменении любого поля в консоль выводится текущее состояние state.
Теперь приступим к установке библиотек для redux. Переходим в командную строку нажимаем Ctrl+C, Y и Enter.
Пишем следующие строки. После каждой нажимаем Enter и ждем завершения установки:
- npm install redux
- npm install react-redux
- npm install redux-thunk
Теперь у нас установлены все библиотеки для redux, которые понадобятся в этом проекте.
Немножко теории — как работает связка react+redux.
У нашего приложения есть только один источник данных – это store. Store содержит в себе общий state, изменение которого происходит через reducer’ы. Например, если пользователь вводит что-нибудь в наше поле ввода, функция onChange вызывает reducer, который меняет общий state и компонент перерисовывается в связи с изменением state.
Теперь напишем простой reducer, который будет получать имя поля, и значение, которое ввел пользователь.
В файле reducers введем следующее
initialState – начальное состояние нашего приложения, reducer – чистая функция, которая принимает state и action и возвращает новый state.
В action у нас содержится type – это тип нашего действия, в payload содержится значение, которое мы добавляем в наш state.
Перейдем в папку actions – там будут action-creators которые будут создавать объекты, которые мы будем передавать в reducers.
Создадим файл index.js и напишем следующее:
Давайте вынесем нашу форму в отдельный компонент Form. Для этого в папке components создадим новую папку form и в ней разместим файлы form.js и index.js
В index.js пишем
В файл form.js перенесем все, что относится к нашему компоненту, а также импортируем библиотеку react.
State в данном компоненте нам больше не нужен – мы будем получать его из store.
Теперь создадим наш store.
Переходим в папку src, открываем файл store.js и пишем следующее
Вернемся в файл app.js и импортируем пару необходимых библиотек:
а также Form из form.js и store из store.js:
Обернем элемент Form в Provider, а в качестве параметра передадим в Provider store. В итоге элемент app.js будет выглядеть следующим образом.
В файле form.js необходимо подключить store, который provider передает всем компонентам внутри себя.
Импортируем функцию connect из react-redux и changeParams из actions.
Так как мы будем применять функцию connect к нашему компоненту уберем export default из объявления класса и перенесем данный export вниз.
Добавим функцию connect для подключения store. Данная функция принимает в себя две функции mapStateToProps и mapDispatchToProps и выполняется относительно Form. Таким образом наш export примет вид
С помощью mapStateToProps мы получаем значение store, а с помощью mapDispatchToProps получаем возможность на него воздействовать через action-creator. Давайте напишем эти функции.
Удаляем функцию onChangeInput – она нам больше не нужна.
Во всех полях и в функции componentDidUpdate заменим this.state на this.props.params.
А также заменим функцию onChangeInput в input на нашу функцию из store – changeParams.
Должен получиться вот такой компонент:
Теперь, если мы все сделали правильно у нас должно получиться следующее.
Поздравляю, наш минимальный react-redux проект создан. В следующей статье мы попробуем навесить стили и подключим сервис к таблицам для сохранения наших данных.
Комментарий удален модератором