Adn@it'summer - Изоморфные приложения с React и Redux
0 likes896 views
Документ описывает изоморфные приложения с использованием React и Redux, подчеркивая преимущества, такие как SEO-поддержка и переиспользование кода. Он объясняет, как архитектура Flux дополняет React, управляя данными через диспетчеры и хранилища, а также указывает на проблемы, которые возникают при использовании Flux, такие как невозможность перезагрузки кода хранилищ. В завершение упоминается структура приложения и роль различных компонентов в управлении состоянием и обработке действий.
![27Проблема №1. Код хранилищ не может быть
перезагружен без обнуления состояния.
todos: [`eat`, `sleep`]
addTodo: function(todo) {
//add to back
}
todos: [ ]
addTodo: function(todo) {
//add to front
}
todos: [`eat`, `sleep`]
addTodo: function(todo) {
//add to back
}
todos: [`eat`, `sleep`]
addTodo: function(todo) {
//add to front
}](https://image.slidesharecdn.com/adnitsummer-react2016-160817062036/85/Adn-it-summer-React-Redux-27-320.jpg)
Adn@it'summer - Изоморфные приложения с React и Redux
- 2. 1. Исполняется в различных окружениях 2. Гарантирует одно поведение 3. Справляется с разностью окружений через абстракции 2Что такое Изоморфный Javascript?
- 3. 3Что он нам дает? 1. Мы можем создать изоморфный Web UI 2. Поддерживает SEO 3. Работает как SPA 4. Единая языковая среда 5. Максимально переиспользуемый код 6. Прирост производительности на старте
- 4. 4Что он нам не дает? 1. Не работает с хранилищами, работает как правило с RESTfull API 2. Чаще всего используется для Web UI 3. Не включает код для обеспечения безопасности
- 5. 5 React — это JavaScript библиотека, которая используется для создания пользовательских интерфейсов
- 7. 7App.js Начальное состояние компонента Функция добавления новой задачи
- 8. 8AddTodo.jsx Функция отправки даных формы. Вызывает callback функции добавления новой задачи
- 9. 9Server.js
- 10. 10htmlString.js Функция, которая рендерит компоненту в html строку
- 14. 14 Flux
- 15. 15Что же такое Flux? Action Dispatcher Store View API Flux — это архитектура, которую команда Facebook использует при работе с React. Это не фреймворк, или библиотека, это новый архитектурный подход, который дополняет React и принцип однонаправленного потока данных.
- 16. 16Action / Действие Action Dispatcher Store View API Действие — это набор методов, которые вызываются из Представлений (или из любых других мест), чтобы отправить Действия Диспетчеру.
- 17. 17Dispatcher / Диспетчер Action Dispatcher Store View API В сущности, Диспетчер — это менеджер всего этого процесса. Это центральный узел вашего приложения. Диспетчер получает на вход действия и рассылает эти действия (и связанные с ними данные) зарегистрированным обработчикам.
- 18. 18Stores / Хранилища Action Dispatcher Store View API Хранилища в Flux управляют состоянием определенных частей предметной области вашего приложения. На более высоком уровне это означает, что Хранилища хранят данные, методы получения этих данных и зарегистрированные в Диспетчере обработчики Действий.
- 19. 19Controller Views / Представления Action Dispatcher Store View API Представления — это всего лишь React-компоненты, которые подписаны на событие «change» и получают состояние приложения из Хранилищ.
- 21. 21App.js Обработчик событий изменения Store Подписываемся на событие изменения Store
- 22. 22AddTodo.jsx Обработчик событий отправки форм. Вызывает Action который добавляет задачу
- 23. 23AppActions.js Action добавление новой задачи
- 24. 24TodoStore.js Обработчик события изменения состояния приложения Диспетчер, который обрабатывает это событие
- 27. 27Проблема №1. Код хранилищ не может быть перезагружен без обнуления состояния. todos: [`eat`, `sleep`] addTodo: function(todo) { //add to back } todos: [ ] addTodo: function(todo) { //add to front } todos: [`eat`, `sleep`] addTodo: function(todo) { //add to back } todos: [`eat`, `sleep`] addTodo: function(todo) { //add to front }
- 28. 28 Action 1 State Action 2 Action 3 Action 1 State 2 Action 2 Action 3 State 2State 1 Проблема №2. Состояние перезаписывается при каждом действии.
- 29. 29Проблема №3. Нет правильных “мест” для сторонних плагинов. Log Store Dispatcher StoreStore Log Dispatch Reducer ReducerReducer ReducerReducerReducerReducer
- 32. 32App.js Функция, которая берет значения из глобального Store
- 33. 33AddTodo.jsx Обработчик событий отправки форм. Вызывает Action который добавляет задачу
- 34. 34AppActions.js
- 35. 35redusers.js Изменяет Store в зависимости от переданного Action
- 36. Технический директор ADN digital studio Михаил Полев [email protected] Спасибо за внимание! goo.gl/d47OoO Ссылка на презентацию: