Создавайте карты и сохраняйте местоположения, используя React Native-Redux-Navigation-Icons-MAPs - Part-II

Проверить Часть-I

Добро пожаловать во вторую часть этой статьи.

В предыдущей части я представил приложение, затем я создал список, в котором отображаются места пользователя, и для создания этого списка я создал два компонента: один для контейнера элементов, а другой - список прокрутки, где для этой цели я использовал FlatList. В то же время я показал, как использовать библиотеку react-native-vector-icons. И я закончил эту часть объяснением библиотеки react-native-navigation, как ее установить и использовать.

Эта часть будет о Redux, что это такое? Как его установить? Как это работает? А как я в приложении его использовал?

Итак, давайте погрузимся в ...

1. Redux:

«Упростите управление состоянием»

В приложении React Native мы используем состояние в разных классах. В этом состоянии мы можем объявлять различные переменные, чтобы использовать их в этом конкретном классе, поэтому переменные в состоянии являются частными и не могут использоваться вне этого класса. Это означает, что в одном приложении у нас разные состояния в разных классах, но иногда нам нужно передать определенную переменную / переменные из одного класса в другой или изменить некоторые переменные, которые существуют на другом экране. Поэтому, чтобы упростить эту работу и не иметь такого количества состояний в одном приложении, которые усложняют их использование, когда приложение растет, мы используем Redux.

redux помещает все состояние в одно место и позволяет различным экранам в приложении достигать этого состояния. Так государство стало глобальным. Скажем иначе, представьте класс, имеющий некоторые функции, если мы объявим переменную в одной из этих функций, другие не увидят ее, но если мы объявим эту переменную вне этих функций как глобальную переменную, тогда все функции будут увидеть это и уметь пользоваться. Точно то же самое, что и redux: он помещает состояние в место, доступное для всех экранов, и поэтому использует его.

Глядя на изображение выше, мы видим общую структуру redux.

Он состоит из центрального хранилища, в котором существует состояние. Чтобы добраться до магазина из любого компонента или класса, нам нужно отправить действие . Можно сказать, что действие - это сообщение, которое мы отправляем в магазин, чтобы сказать, что я хочу что-то сделать с магазином, это может быть добавление некоторых данных, удаление, обновление или что-то еще, что мы обычно делаем с переменными. Итак, действия - это предопределенные информационные пакеты.

Затем действия достигает редукторов. Что делают редукторы? Итак, редуктор получает действия, а затем обновляет состояние, он делает это, выполняя чисто синхронную функцию, у которой нет никаких побочных эффектов; побочными эффектами могут быть выход в Интернет, загрузка другой страницы и т. д. Итак, reducer работает над обновить центральный магазин.

Последний пункт в этом круге redux заключается в том, что когда центральное хранилище обновляется, оно запускает некоторые автоматические подписки, а затем, когда компоненты или классы подключаются к redux эти подписки передают им обновленное состояние.

Redux в баллах:

  1. Центральный магазин,
  2. Редукторы,
  3. Действия.

Ну, просто это было redux, просто, верно! 🤓

2. Установка Redux:

Установить redux более чем просто. Все, что вам нужно сделать, это ввести в терминал следующее:

npm install --save react-redux

тогда это,

npm install — save redux

после завершения установки вы можете сказать, что получили redux 🤩

3. Использование Redux в приложении:

Это часть, относящаяся к redux в структуре нашего приложения. Я создал папку под названием store и внутри нее я создал папку actions, в этой папке я собираюсь определить действия, которые я буду использовать в приложении. Затем я создал папку reducer, этот редуктор обновит хранилище, как я объяснил ранее, и именно в этой папке будет находиться наше состояние. И, наконец, я создаю файл .js с именем configureStore, который является хранилищем. Итак, теперь у нас есть store, редукторы и действия.

Начнем с папки действия,

Он состоит из трех файлов .js.

Первый - actionTypes.js, где мы объявляем действия, которые будем использовать в приложении. Помните, что в нашем приложении пользователь сохраняет или удаляет места. В соответствии с этим нам нужно создать два действия: одно для добавления мест в магазин, а второе - для удаления определенных мест из хранить. Давайте посмотрим на код,

export const ADD_PLACES = 'ADD_PLACES';
export const DELETE_PLACE = 'DELETE_PLACE';

Вау! какой простой код правильный!

Объявление действия принимает форму, которую вы видите выше, и будьте осторожны, чтобы имя действия до и после знака равенства было одинаковым. И мы говорим экспорт в заголовке строки кода, потому что мы вызовем это действие в другом месте.

Теперь перейдем к файлу location.js. В этом файле мы определяем функции для каждого действия, которые говорят, что действие будет делать. Итак, давайте посмотрим на код,

import { ADD_PLACES, DELETE_PLACE } from './actionTypes';
export const addPlaces = (placeName, location) => {
  return {
    type: ADD_PLACES,
    placeName: placeName,
    location: location
  };
};
export const deletePlaces = (key) => {
  return {
    type: DELETE_PLACE,
    key: key
  };
};

Во-первых, вы помните, я говорил вам, что мы пишем экспорт при объявлении действий, потому что мы вызываем их в другом месте, здесь мы вызываем их, чтобы определить для них функции, мы вызывали их с помощью import ключевое слово из файла, в котором мы их объявили. Каждая функция возвращает объект javascript, поэтому мы пишем return {…}. При объявлении функций для действий каждая функция должна содержать как минимум тип действия, как вы видите, обе функции выше имеют type свойство. Давайте посмотрим на функции, объявленные для действия ADD_PLACES, сначала мы пишем экспорт по той же причине, о которой я говорил ранее, затем const , затем имя функции, которое предпочло быть связанным именем здесь, я дал ему имя addPlaces. Поскольку действие ADD_PLACES получает название места и местоположение от пользователя здесь, функция должна иметь два параметра для каждой из этих данных. Затем внутри функции мы возвращаем объект javascript, который содержит тип действия и входящие параметры. Как видите, параметры присвоены некоторым переменным. Позже мы увидим, как мы будем использовать эти переменные. То же самое мы делаем со вторым действием, но для этого действия мы получаем только один параметр, который является ключом, это ключ. элемента, который пользователь хочет удалить.

Давайте посмотрим на последний файл в папке actionTypes, index.js.

Как видите, у нас есть два файла для объявления действий. Что ж, когда мы хотим запустить действие, к какому файлу нам нужно перейти? На самом деле нам нужно получить доступ к файлам actionTypes.js и location.js, но каждый раз, когда мы хотеть инициировать действие не просто, поэтому мы создаем индекс, чтобы сохранить в нем наши действия. Давайте посмотрим на его код, чтобы лучше понять,

export { addPlaces, deletePlaces } from './locations';

что ты говоришь! 😁, файл index - это столько. Что мы делаем, так это привязываем его к файлу location.js, и, как вы знаете, файл location.js привязать к файлу actionTypes.js, чтобы таким образом, достигнув файла index.js, мы фактически достигли два других файла, и мы можем рассматривать действия как одно целое, чтобы мы могли легко запускать любое действие.

Теперь мы можем перейти в папку reducer, структура которой выглядит следующим образом:

он содержит только один файл с именем locations.js.

В этом файле мы сохраняем состояние. И, как вы помните из предыдущего объяснения, действия достигают редукторов, поэтому этот файл будет ждать одного из наших действий, которые мы создали для обновления состояния в соответствии с этим действие. Давайте посмотрим на код,

import { ADD_PLACES, DELETE_PLACE } from '../actions/actionTypes';
const initialState = {
  locations: []
};
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_PLACES:
    return {
      ...state,
      locations: state.locations.concat({
        placeName: action.placeName,
        location: action.location,
        key: Math.random()
      })
    };
    case DELETE_PLACE:
    return {
      ...state,
      locations: state.locations.filter(location => {
        return location.key !== action.key;
      })
    };
    default:
      return state;
  }
};
export default reducer;

посмотрите на начало кода, и вы увидите наше состояние под названием «initialState»

и он очень маленький, если у него есть только один массив для хранения деталей места. После этого мы объявляем функцию reducer, которая, как я сказал, будет ждать действия, ожидание действия означает, что она использует switch… case, , где будет сказано в случае получения действия ADD_PLACES, выполните следующие действия, а в случае получения DELETE_PLACE выполните следующие действия, но в случае, если вы не получили никакого действия, оставьте состояние как есть, потому что то, что делает редуктор при получении действия, обновляет состояние в соответствии с этим действием.

Давайте посмотрим, что делает reducer, когда получает действие ADD_PLACES. Сначала он сохраняет предыдущее состояние, набрав … state,. Затем он говорит добавить к массиву местоположения ближайшие placeName и location, а затем генерирует случайный ключ для этого конкретного места, чтобы иметь возможность добраться до него при необходимости.

Примечание: создание случайного ключа - не лучшая идея, но я использовал его здесь, чтобы показать вам общую логику.

Давайте возьмем один из переданных аргументов, чтобы понять, как мы их передаем, и пусть это будет placeName,

placeName: action.placeName,

мы говорим action.placeName, что означает получение PlaceName, которое было передано в файл действия, и помним, что мы дали placeName этой переменной в файле действий, и если мы дали это другое имя, мы могли бы написать это другое имя здесь, т.е. пусть имя в файле действия будет nameOfPlace, здесь мы бы назвали его так,

placeName: action.nameOfPlace,

если вы вернетесь в файл locations.js, вы увидите переменные, о которых я говорю.

Надеюсь, вы поняли этот момент.

Что касается второго действия DELETE_PLACE, мы пытаемся найти место, которое key равно ключ из файла действие и удалите его из массива. Файл действия получает ключ элемента из экрана списка, на котором отображаются места, где пользователь нажимает кнопку удаления и который отправляет ключ этой кнопки в действие, а затем в файл reducer, чтобы удалить это место. Это логика отправки данных в редуктор.

Теперь последний файл в папке store, это configureStore.js,. Я сказал, что этот файл является хранилищем.

Мы привязываем reducer к этому файлу, чтобы он был ссылкой на приложение. Я имею в виду, что когда экран хочет достичь redux, он должен пройти через этот файл. Итак, как нам привязать reducer к этому store? Вот что мы видим в этом коде,

import { createStore, combineReducers } from 'redux';
import locationsReducer from './reducers/locations';
const rootReducer = combineReducers({
    locationsList: locationsReducer
});
const configureStore = () => {
    return createStore(rootReducer);
};
export default configureStore;

Первым делом мы импортируем createStore и combReducers из redux «Библиотека, которую мы установили», createStore из ее имени, она предназначена для создания хранилища и commonReducers - это объединение различных редукторов, если они существуют, но здесь у нас не более одного. Затем мы импортируем наш редуктор, наш редуктор - это файл location.js, мы импортировали его и дали ему это имя locationsReducer, , если бы у нас были другие редукторы, мы бы импортировали их таким же образом, а затем объединяли бы их с помощью функции combReducers. После этого мы создаем нашу функцию configureStore, в которой мы сообщаем redux, что наш reducer будет.

Что ж, пока я могу сказать вам, что мы создали redux для нашего приложения.

Итак, в этой части мы поняли redux и установили его, и мы увидели, как создавать действия и редукторы, и, наконец, как создать магазин.

В следующей части мы начнем создавать экраны, чтобы увидеть, как используется react-native-navigation lib и как мы привязываем эти экраны к redux.

Помните: полный код и окончательное рабочее приложение будут опубликованы вместе с вами в финальной части.

Не пропустите следующую часть… 😄👇🏻

Вот Ссылка на Часть-III… 👈🏻