Создаем приложение на create-react-app, Redux, React Router & Redux Thunk
Вольный перевод статьи Getting started with create-react-app, Redux, React Router & Redux Thunk.
tldr; Вы можете склонировать GitHub репозиторий автора и пропустить руководство или посмотреть его ролик на YouTube.
Мы собираемся создать следующий проект
В данном руководстве рассмотрим инструмент, продвигаемый React-сообществом, основная фишка которого “отсутствие необходимости конфигурирования” — Create React App.
Я использую create-react-app для каждого нового приложения на React. Он очень хорош!
Наикрутейшая вещь, идущая в комплекте Create React App — инструментарий для eject, который позволяет вам полностью отвязаться от Create React App (Примечание переводчика: в таком случае вы используете его, как генератор шаблонного кода) и добавить расширенную конфигурацию.
Но чтобы добавить Redux, React Router & Redux Thunk вам не обязательно делать eject.
Дальнейшее прочтение подразумевает, что вы хорошо понимаете принципы Redux. Гляньте это руководство на Egghead от Дена Абрамова, если хотите увидеть почему вокруг Redux столько шума.
Попробуем на практике!
Во-первых, убедитесь, что у вас установлен Create React App и Yarn.
npm install -g create-react-app yarnЗатем создайте новое приложение React.
create-react-app react-redux-example
cd react-redux-exampleПрежде чем писать код, забежим вперед и установим все необходимые зависимости.
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk history redux-devtools-extensionЗамечание: Все файлы, которые будут созданы далее, должны находится в папкеsrc.
1. Store
Все в Redux хранится в одном store. Давайте создадим наш store и разберемся с react-router и redux-thunk.
В пределах store мы импортируем несколько core-модулей из Redux, которые помогают создать кастомный глобальный store. react-router-redux иredux-thunk известны как middleware для Redux. Нам соответственно необходимо сконфигурировать store для работы с ними.
Вы можете заметить, что мы делаем импорт rootReducer (мы вернемся к понятию Reducer позже) из файла, который еще не создан. Исправим это, создав ./src/modules/index.js.
Нашей переменной store присваивается значение, возвращаемое функцией createStore. В нашем примере она принимает rootReducer, initialState и enhancer.
Переменная history синхронизирует наш browserHistory с store. Для дальнейших нужд необходимо её экспортировать.
Кроме того мы должны экспортировать store как default.
2. Routes
В этом руководстве используется React Router v4, который позволяет устанавливать компонент в любое место нашего приложения в случае, если текущий url соответствует определенным нами значениям.
В предыдущей версии React Router вы могли видеть такие файлы, как routes.js, которые содержат большой список вложенных роутов, но React Router v4 выполняет роутинг иначе.
История роутинга хранится внутри нашего Redux store, который был создан в первой секции и был проброшен с помощью ConnectedRouter, которым мы воспользуемся позже.
Начнем мы с определения в контейнере App того, какой компонент будет выдаваться по какому url.
3. Containers
Изначально, создадим App компоненту, которая будет заниматься отрисовкой навигации и всех соответствующих роутам компонентов внутри тега main .
Теперь создадим компоненту Home, которую будем выводить по пути /.
Это должно быть очевидно для тех, кто уже использовал Redux до этого, но в данном пример мы импортируем push из react-router-redux и используем его без создания экшена.
Так как наш store знает о react-router-redux он может взаимодействовать с routing-экшенами. Магия! 💥
В конечном итоге создаем About компоненту для добавление еще одного роута.
4. Рендеринг приложения
Пришло время завести наше приложение.
Мы должны передать react-dom необходимый store и информацию об истории браузера —history . Для этого экспортируем ConnectedRouter. ConnectedRouter имеет доступ к store, предоставленному с помощьюProvider. Поэтому нет необходимости волноваться о передаче каких-то дополнительных параметров в props.
Магия React Router💥!
5. Добавляем Redux Thunk
Сейчас большинство React приложений работают с асинхронными функциями. Redux Thunk — middleware для Redux, который позволяет возвращать функцию вместо экшена.
Рассмотрим пример, чтоб стало понятно!
Давайте создадим несколько экшенов и редюсеров для счетчика.
Функция incrementAsync и decrementAsync возвращают Thunk. Изначально мы пробрасываем экшн (INCREMENT_REQUEST и DECREMENT_REQUEST) и затем обворачиваем другую функцию в setTimeout(), которая вызывает dispatch во время вызова таймера. 🙌
Чтобы наш store был связан со state компонент, мы должны подключить counter.js к rootReducer.
Закончим наш пример с Thunk, обновив Home контейнер и добавив в него работу с state и экшенами счетчика.
Запускаем!
Пришло время запустить приложение с помощью команды yarn start. Ниже показаны результаты! Вы можете пощупать в живую на Heroku.
Вы можете найти больше руководств и видео на канале автора текста. Подписывайтесь! ❤️
