Сначала сотрите харази, давайте представим, dva происходит из игры «Overwatch», выпущенной Blizzard, со ссылкой на официальное представление персонажа:
- реагировать-маршрутизатор: управлять маршрутами
- Редукс: управление моделями
- redux-saga: управление асинхронными вызовами (побочные эффекты)
Давайте посмотрим на рамочную диаграмму: все ли знакомые рецепты и знакомые вкусы?
Code is everywhere
+ src
+ sagas
- user.js
+ reducers
- user.js
+ actions
- user.js
Затем, когда нам нужно реализовать функцию, вам нужно переключаться взад и вперед между этими файлами. . .
С другой стороны, два также пытаетсяСкрыть некоторый рутинный код, который часто пишется многократно, что позволяет разработчикам больше сосредоточиться на бизнес-логике. Например, когда мы пишем входной файл для приложения, нам нужно сделать так много вещей:
- Настройка промежуточного программного обеспечения
- создать магазин
- Добавить
Привязка - Создать сагу о наблюдателях и сагу о корнях
- начать сагу
- . . .
На самом деле код может быть абсолютно одинаковым более чем в 95% проектов, и нам не нужно каждый раз тратить время на его переписывание.
Ниже приводится официальное введение в содержание, относящееся к dva 1.0. В dva 2.0 были внесены некоторые оптимизации и обновления, а позже будет специальный раздел, посвященный конкретным изменениям.
8 концепций
Фактически, это в основном концепция, представленная в предыдущих статьях:
- состояние: то есть глобально уникальное хранилище
- действие: действие в Redux
- модель: это концепция, абстрагированная dva, чтобы поместить следующие вещи в единый файл
- редуктор: редуктор в Redux
- эффект: рабочая сага в редукс-саге
- подписка: введена ранее, используется для подписки на источники данных
- Маршрутизатор: в React-Router
- route: т. е. реагирующий маршрутизатор
- route: т. е. реагирующий маршрутизатор
export default {
namespace: 'transactions',
state: {
txs: []
},
subscriptions: {
setup({ dispatch, history }) {
history.listen(location => {
if (location.pathname === '/transactions/list') {
dispatch({type: 'fetch'});
}
});
},
},
effects: {
*fetch({ payload }, {call, select, put}) {
const { result } = yield call(apis.fetchTxs)
yield put({type:'addTx', payload: result})
},
},
reducers: {
addTx(state, { payload }) {
return { ...state, txs: payload };
},
},
}
- app.model (модель): модель регистрации
- app.unmodel(namespace): отменить регистрацию модели
- app.replacemodel (модель): заменить модель
- app.router (({history, app}) => RouterConfig): настроить маршрут
- app.start(селектор?): запустить приложение (параметр — идентификатор корневого компонента)
По ссылке ниже показан пример создания одностраничного приложения за 5 шагов:GitHub.com/сорри копия/нет…
4 модуля
Это в основном разделено на структуру кода, обычно разделенную на следующие четыре типа модулей:
- Сервис: API для выполнения асинхронных задач
- модель: содержит эффект, редуктор, подписку
- компонент: компонент без гражданства
- Отправить действие для запуска обновления статуса
- action = 'пространство имен/эффект' или 'пространство имен/редуктор'
- маршрут: различные контейнеры (название не очень удачное)
- Подключиться к модели через Connect ()
Кроме того, поскольку dva 1.0 использует react-router v3, поэтому существует внешний слой для настройки статических маршрутов router.js. Поэтому общая структура каталогов показана ниже:
+ src/
+ services/
- users.js
+ models/
- users.js
+ components/
+ users/
- users.js
- users.css
+ routes/
- users.js
- router.js
React-router v4 принят в dva 2.0, поэтому router.js не нужен. Кроме того, теперь официально рекомендуется использовать umi (Umi, последний проект с открытым исходным кодом, опенсорс), который может автоматически регистрировать модель для вас и генерировать конфигурацию маршрутизации в соответствии со структурой каталогов.Структура каталогов станет следующей:
+ src/
+ models/
- global.js
+ pages/
+ users/
+ index.js
+ services
- users.js
+ models/
- users.js
+ components/
+ users/
- users.js
- users.css
Можно обнаружить, что, поместив маршрут и связанную с ним модель в каталог страниц, можно добиться функции уменьшения связи и одновременного удаления.
Плагин
Как упоминалось ранее, API может регистрировать «плагины» — так называемые «плагины» — это некие «крючки» жизненного цикла, которые могут выполнять некоторую дополнительную обработку при возникновении события. Включает в себя следующие виды крючков:
- onError
- onStateChange
- onAction
- extraReducers: вызываются дополнительные редюсеры (например, с редукционной формой)
- extraEnhancers: вызываются дополнительные усилители хранилища (например, с помощью redux-persist)
Типичный пример — когда страница загружает данные, она крутится по кругу и после загрузки прячется — это сцена, которую нужно использовать во многих местах. Официальный предоставляет плагин dva-loading, который может автоматически устанавливать загрузку в true при асинхронном запросе данных и устанавливать загрузку в false после получения данных. Таким образом, вы можете привязать загрузку в компоненте, чтобы добиться автоматического управления окружностью:
// index.js
import createLoading from 'dva-loading';
app.use(createLoading());
// components
function mapStateToProps(state) {
const { list, total, page } = state.users;
return {
loading: state.loading.models.users,
list,
total,
page,
};
}
И переписка переписка + сага
Хотя dva — это всего лишь слой облегченной инкапсуляции, он имеет некоторые специальные соглашения об именах.Когда вы впервые начнете писать код, вы будете немного сбиты с толку и не сможете понять соответствующую связь с предыдущим прямым использованием redux+. сага. Вот я тебе помогу разобраться. один раз.
Процесс использования Redux + Saga напрямую заключается в следующем:
- Компонент отправляет действие запроса, а соглашение о типе — пространство имен/эффект.
- Эффект вызывает службу, а затем помещает действие результата.Соглашение о типах: namespace/reducer (пространство имен может быть опущено в той же модели)
- Редьюсер получает тип и полезную нагрузку от действия и изменяет состояние (каждый редюсер обрабатывает только один тип действия, и тип согласуется с именем редюсера)
- компонент по состоянию mapStateToProps() в.
Получить обновление
Изменения в два2.0
В настоящее время dva эволюционировала до версии 2.0.Помимо принятия react-router v4, есть некоторые изменения в деталях:
-
Возвращает обещание при отправке действия типа effect, что удобно для обратных вызовов слоя просмотра.
-
Добавлен динамический интерфейс для обработки загрузки компонентов по требованию с помощью react-router@4.
-
взять префикс пространства имен автодополнения
-
Дополнительные триггеры до и после эффекта
/@@startа также/@@endдействие, вы можете использовать это соглашение для достижения синхронного выполнения put -
Редьюсер и эффект с одним и тем же именем не проваливаются (т.е. выполняются оба), а только выполняют эффект
Подробнее см.:GitHub.com/сорри копия/нет…
На сегодня все, старые правила, последняя карта разума заканчивает эту статью:
Ссылаться на:
GitHub.com/Но VA Technologies/DV Ah/i…