Интерфейсный мир быстро развивается, и может быть трудно посвятить время изучению нового инструмента. Я настоятельно рекомендую заняться React, и, как только вы это сделаете, я думаю, что Redux станет для него отличным компаньоном. Это следующий шаг для приложений, которые усложняются.
Мы собираемся использовать create-react-app, чтобы ускорить работу. Так что, если вы еще этого не сделали, давайте настроим его на нашем компьютере и приступим.
Настройка приложения:
Мы собираемся использовать здесь yarn, но вы можете использовать npm, если хотите.
Установите create-react-app, запустив yarn install -g create-react-app. Создайте новое приложение (наше будет называться my-things-app), запустив create-react-app my-things-app. Затем перейдите в каталог /my-things-app, запустите yarn install, а затем yarn start.
Добавление зависимостей:
Нам понадобятся пакеты redux, react-redux, а также redux-thunk. redux-thunk необходим для возврата чего-либо, кроме простых объектов из действий. Мы собираемся запросить данные из API, а выборка вернет обещание. Установите их, запустив yarn add NAME_OF_PACKAGE для каждого. Теперь они должны быть добавлены в ваш файл package.json.
Организационный кодекс:
Просто для начала мы начнем с небольшой настройки. Сначала вам понадобятся три каталога, ./actions, ./reducers, ./store, все в каталоге src вашего нового блестящего приложения. Чтобы узнать больше об этом, загляните в redux docs.
Добавьте ./store/configureStore.js файл. Мне нравится эта настройка, поскольку вы усложняете ее мысленно, но вы можете написать этот код прямо в файле index.js, созданном вашим приложением.
Если у вас должно быть приложение с вызовом данных Soup и действиями, которые различны как для одного Soup, так и для коллекции Soups, вы можете захотеть иметь два редуктора, soupReducer и soupsReducer. В этом приложении наши единственные отображаемые данные будут называться stuff, а для простоты добавляемый редуктор может называться ./reducers/stuffReducer.js. Множественное число здесь не имеет значения, кроме удобства чтения и ясности.
Вам также потребуется создать ./reducers/rootReducer.js файл. Все добавляемые вами редукторы будут объединены в rootReducer.js.
Сейчас также хорошее время, чтобы добавить наш ./reducers/initialState.js файл, который поможет нам всегда иметь определенный уровень уверенности в форме состояния на уровне приложения.
В ./action добавьте файл ./actions/actionTypes.js. Это поможет, имея только один файл, в котором можно ссылаться на список всех возможных действий для приложения. Также нам нужно будет добавить ./actions/stuffActions.js для самих действий.
Добавление действий и редукторов:
Для некоторой предыстории здесь документы действительно ясны. По сути, действия описывают что-то происходящее, а редуктор реагирует на действие.
Начиная с actionsTypes.js здесь мы просто хотим экспортировать константы, которые мы планируем использовать для каждого действия. В этом случае давайте начнем с двух простых действий: FETCH_STUFF и RECEIVE_STUFF.
Также нам потребуются сами действия. Мы собираемся настроить это с помощью функции для каждого типа действия, которая возвращает объект, содержащий по крайней мере тип действия.
В случае получения нашего stuff мы хотим быть уверены, что получаем наши данные, и поэтому мы запрашиваем их, выполняя fetch для нашего данного URL. Мы будем использовать нативную выборку, в зависимости от вашего проекта вы можете использовать polyfill для выборки.
Затем мы обновим ./reducers/stuffReducer.js, чтобы импортировать типы действий, и у нас будет красивый небольшой пример того, как обрабатывать каждый тип действия. Мы также обновим ./reducers/rootReducer.js необходимой сантехникой, а также нашу новую забаву stuffReducer.
Настройка магазина:
Docs redux описывают хранилище как объект, который объединяет действия и редукторы.
Теперь, когда у нас есть несколько типов действий и редуктор rootReducer, нам нужно, чтобы все взаимодействовало с приложением. В файл ./store/configureStore.js мы импортируем createStore из redux, а наш rootReducer.
Мы передадим createStore наше промежуточное ПО (thunk), rootReducer и некоторые аргументы, чтобы включить инструменты разработчика, которые действительно удобны при работе с приложением redux.
Чтобы использовать этот блестящий новый код, нам нужно добавить наш магазин в Provider. В index.js файле нашего небольшого приложения мы должны импортировать Provider из react-redux и сделать так, чтобы наш компонент приложения был обернут. Этот компонент теперь примет store, который мы передали ему как опору, которую мы вернули из функции, которую мы только что написали в configureStore.
На данный момент у нас есть много работы по первоначальной настройке. Конечно, нам понадобятся некоторые компоненты, чтобы фактически отправить одно или два действия, чтобы мы могли увидеть, как все они работают вместе.
Написание подключенного компонента:
Давайте добавим новый компонент, в котором перечислены все наши stuff. Для этого добавьте файл StuffList.js. Затем визуализируйте этот новый компонент внутри компонента theApp.
В дополнение ко всему, что вы используете для React, мы также будем импортировать connect из react-redux и bindActionCreators из redux вместе с нашими действиями из ./actions/stuffActions.js. Обратите внимание, что bindActionCreators используется, когда вы хотите передать некоторые создатели действий компоненту, а connect используется, чтобы разрешить компоненту доступ к состоянию приложения redux, которое мы реализовали.
В дополнение ко всем обычным настройкам нового интересного компонента реакции нам потребуются две функции, которым мы в конечном итоге передадим connect в качестве аргументов. Это mapStateToProps и mapDispatchToProps. первый mapStateToProps будет гидратировать свойства вашего компонента из состояния приложения. Следующее, mapDispatchToProps гарантирует, что наши действия имеют доступ к dispatch из redux.
После того, как мы все это настроили, вместо того, чтобы экспортировать класс, который является самим реагирующим компонентом, мы будем экспортировать подключенный компонент, который является результатом функции connect, которую мы импортировали из react-redux.
Затем не забудьте импортировать и отобразить наш новый компонент в файле App.
Использование инструментов разработчика:
На данный момент у нас все подключено. Мы включили инструменты разработчика при настройке хранилища, поэтому, если вы используете Chrome и у вас установлено расширение, мы сможем обнаружить наше хранилище redux.
После открытия инструментов Chrome dev посмотрите на новую вкладку Redux! при загрузке приложения вы должны увидеть состояние, которое соответствует тому, что вы установили в качестве исходного состояния.
Вы можете подумать: «Почему не купить?», Потому что мы еще не отправили никаких действий!
Запуск действия:
Вернувшись к нашему StuffList компоненту, нам нужно активировать действие, чтобы получить наш stuff. В этом случае мы можем добавить функцию componentDidMount и внутри нее вызвать функцию fetchStuff.
Теперь, когда мы загружаем приложение, глядя на наши инструменты разработки redux, в частности на монитор журнала, мы должны видеть, что наше действие зарегистрировано, а состояние обновляется.
Ву! Отметьте свое новое приложение и получите удовольствие от React + Redux.
