0 до 1
.колапс "> Съдържание
Когато излезе версия 1.0 на Redux, реших да отделя известно време на поредица от истории за моя опит с нея. Наскоро трябваше да избера „изпълнение на Flux“ за клиентско приложение и пак да се радвам да работя с Redux.
Защо Redux?
Redux предлага да се мисли за приложение като първоначално състояние, модифицирано от поредица от действия, което според мен е наистина добър подход за сложни уеб приложения, който отваря много възможности.
Разбира се, можете да намерите повече информация за Redux, неговата архитектура и ролята на всеки компонент в документацията.
Изграждане на списък с приятели с React и Redux
Днес ще се съсредоточим върху изграждането на първото ви приложение Redax и React стъпка по стъпка: създайте прост списък с приятели от нулата.
Можете да намерите готовия код тук.
1. Инсталация
Авторът на Redux Даниил Абрамов създаде страхотна разработка с React, Webpack, ES6/7 и React Hot Loader, която можете да намерите тук.
Вече има компилации с инсталиран Redux, но мисля, че е важно да се разбере ролята на всяка библиотека.
1.1 Добавете редукс, реакция-редукс и редукс-devtools
Трябва да инсталираме три пакета:
- Redux: самата библиотека
- React-redux: свързване с React
- Redux-devtools: по избор, предоставя някои полезни инструменти за разработка.
1.2 Структура на каталога
Въпреки че това, което ще направим, е доста просто, нека създадем структура на директории като реално приложение.
Ще видим по-подробно ролята на всяка от директориите, когато създаваме приложението. Преместихме App.js в директорията на контейнери, така че трябва да персонализираме изявлението за импортиране в index.js.
1.3 Свързване на Redux
Трябва само да активираме devtools за средата за разработка, така че модифицирайте webpack.config.js по следния начин:
Когато стартираме нашето приложение с DEBUG = true npm start, това ще даде възможност на флага __DEV__, който можем да използваме в нашето приложение. Можем да свържем devtools по този начин:
Тук правим две неща. Ние заместваме createStore, използвайки създадената функция, която ни позволява да прилагаме множество подобрители на магазини, като devTools. Включваме и функцията renderDevTools, която изобразява DebugPanel.
Сега трябва да модифицираме App.js, за да се свържем с redux. За целта ще използваме Доставчика от response-redux. Това ще направи нашия екземпляр за съхранение достъпен за всички компоненти, които се намират в компонента на доставчика. Няма нужда да се притеснявате за странната изглеждаща функция, нейната цел е да използва „контекста“ на функцията React, за да направи хранилището достъпно за всички деца (компоненти).
За да създадем магазина, използваме функцията createStore, която дефинирахме във файла devTools, като карта на всичките ни редуктори.
Внос на синтаксис ES6 * като редуктори ни позволява да получим обект във формата < key: fn(state, action),… >. Това е чудесно за задаване на аргументи на combReducers .
В нашето приложение App.js е външната обвивка за Redux, а FriendListApp е основният компонент за нашето приложение. След като създадем прост „Hello world“ в FriendListApp.js, най-накрая можем да стартираме нашето приложение с redux и devTools. Трябва да получите това (без стилове).
Въпреки че това е просто приложение „Hello world“, ние сме активирали Hot Reloading, т.е. можете да модифицирате текста и да получавате автоматични актуализации на екрана. Както можете да видите, devtools вдясно показва празни хранилища. Нека ги попълним!
2. Създайте приложение
След като всички настройки са готови, можем да се съсредоточим върху самото приложение.
2.1 Действия и генератори на действия
Действията са структура, която прехвърля данни от вашето приложение в магазина. По споразумение действията трябва да имат поле тип низ, което указва типа на действието, което се извършва. Добра практика е да дефинираме този тип в друг модул и това ни кара да мислим предварително какво ще правим в нашето приложение.