Если вы читаете статьи, которые я публикую еженедельно, то знаете, что я фанат React Native и Meteor. Я использую их каждый день и каждый вечер учу, как ими пользоваться.
Когда вы создаете приложение React или React Native, вы, скорее всего, в конечном итоге будете использовать какой-то вид Flux. Я лично использую Redux.
Я сделаю полный подробный обзор того, как использовать Redux в приложении React Native в своем предстоящем курсе (подпишитесь на мой список рассылки, чтобы узнать подробности!), Но сегодня я хочу поговорить о настройке магазина для ваша реализация Redux. Это то, к чему вы редко будете прикасаться после настройки, может сбивать с толку, когда вы начинаете новый проект, и это очень важно.
Итак, сегодня я хочу рассказать вам, как я настраиваю хранилище для Redux - чисто мое мнение, но у меня это работает :)
Пакеты
Я не хочу ошеломлять вас, но я хочу дать вам представление о том, что мы используем и почему мы собираемся это использовать. Определенно есть другие варианты, но это то, что я использовал в своей повседневной работе.
redux: Вы, наверное, знакомы с этим! Мы собираемся использовать createStore и applyMiddleware. createStore довольно прост, а applyMiddleware поможет промежуточное ПО, которое мы будем использовать, описано ниже.
redux-immutable-state-invariant: вместо того, чтобы использовать что-то вроде immutable.js для обеспечения неизменности, мы просто будем использовать этот пакет, чтобы случайно не изменить состояние. Immutable.js имеет множество преимуществ, но также требует обучения - решать вам.
redux-logger: регистрирует предыдущее состояние, отправленное действие и результирующее состояние. Приятно иметь возможность отслеживать, что происходит, когда это происходит и что происходит.
redux-storage: сохраняет наше состояние на клиенте, так что часть / все оно становится доступным, как только клиент загружает наше приложение при следующем посещении нас. Это работает как для React (через localStorage), так и для React Native (через AsyncStorage). Мы также коснемся некоторых расширений, которые вы можете использовать.
Базовая настройка
Первое, что мы хотим сделать, это просто настроить базовый магазин. Мы собираемся сделать здесь немного больше, чтобы нам было проще интегрировать другие части. К коду!
Добавление журнала
Настроить ведение журнала будет очень просто. Обратите внимание на две вещи:
- Для правильной работы регистратор всегда должен быть последним промежуточным программным обеспечением, добавленным в стек.
- Мы передаем предикат, потому что не хотим, чтобы это промежуточное ПО работало в производственной среде. Это чисто инструмент для отладки.
Вот обновленный файл магазина
Добавление проверки неизменности
Это еще один очень простой в настройке. Нам просто нужно потребовать его и отправить в стек промежуточного программного обеспечения. Опять же, это чисто для отладки, поэтому мы не хотим включать его в производственный выпуск.
Сохранение Redux Store
Это будет наша самая сложная установка промежуточного программного обеспечения. Сначала настроим его самым простым способом - хранить после каждого действия. Здесь я использую собственный механизм хранения React, потому что это означает, что я могу копировать и вставлять код из других проектов. То же самое должно относиться к сети. Я заключил новый код в блоки комментариев, чтобы его было легче найти.
Помимо новых фрагментов кода вы можете видеть, что мы изменили функцию makeStore для загрузки старых данных хранилища. Мы также добавляем в функцию аргумент обратного вызова, чтобы вы могли что-то сделать после загрузки старого хранилища. Он следует за шаблоном ошибка, результат.
Улучшение хранилища Redux - добавление защиты от отказов и фильтра
Прямо сейчас сохраняемое хранилище будет обновляться после отправки каждого действия, и все дерево состояний будет скопировано. Это может быть неэффективно, если вы отправляете множество действий за небольшой промежуток времени (например, делаете несколько запросов при загрузке приложения). К счастью, мы можем расширить redux-storage, чтобы учесть это.
Мы собираемся сохранять хранилище только один раз в секунду. Это поможет с возможностью быстрой последовательной отправки множества действий.
Затем мы будем хранить только ключ auth хранилища. Вы можете использовать это, если данные могут быстро устареть, но вы ожидаете, что пользовательский сеанс будет успешным, когда они в следующий раз откроют приложение.
Вот код
Это довольно простой в создании магазин, который поможет вам проделать долгий путь. Вы можете сделать больше, если хотите, но я не рисковал выходить за рамки этого.
Если вы нашли это полезным, подпишитесь на мой список рассылки! Я пишу новый пост почти каждую неделю и в настоящее время готовлю курс по созданию приложения с React Native и Redux.
