Давайте сначала разберемся, что такое Redux ?
Redux — это библиотека JavaScript для управления состоянием вашего приложения, которую можно использовать с React , Angular , React Native для поддержания состояния вашего приложения.
Почему Redux ?
Redux может поддерживать состояние вашего приложения в одном хранилище, поэтому вам не нужно беспокоиться о том, как можно управлять состоянием в вашем приложении.
Давайте рассмотрим простой пример, если у вас есть значение состояния с именем «cartCount» для управления корзиной для приложения электронной коммерции. Если вы хотите отображать «cartCount» в приложении на каждом экране приложения, например Amazon и другие приложения для электронной коммерции. Как получить это значение состояния на всех экранах приложения без Redux ?
Вот решение🙂
Используйте Redux для управления состоянием приложения
Как использовать Redux с React-Native
Надеюсь, у вас есть базовые знания о React-Native, например
- Настройка проекта
- Структура папок
- Понимание кода React Native
Вы можете ознакомиться с документацией React Native, чтобы разобраться в настройке и базовом коде
https://facebook.github.io/react-native/docs/getting-started
OR
Для быстрого старта вы также можете начать с Expo
https://docs.expo.io/versions/latest/
Хорошо, теперь мы готовы перейти к нашей основной теме Redux
Основной термин Redux
- Действие
- Редуктор
- Магазин
Давайте проверим, что означают приведенные выше термины:
Действие — это функция, которая выполняет операцию и возвращает данные, которые можно назвать «полезной нагрузкой».
Редуктор также является функцией с двумя аргументами типа действия и начальным состоянием, которые возвращают новое значение состояния в соответствии с типом действия.
Сохранить поддерживать дерево состояний, если вы хотите изменить значения состояния, у нас есть действие по отправке (выполнению) этого состояния.
Примечание. Действия и редукторы связаны через тип действия, который представляет собой простое константное значение javascript, например.
const ADD_VALUE = "ADD_VALUE"
Мы создаем базовое новостное приложение с использованием NewsApi (https://newsapi.org/), генерируем ключ API для NewsAPI, регистрируясь на https://newsapi.org/.
Создайте новое приложение React Native с помощью react-native-cli или Expo
Структура папок для приложения:
+-- src +-- components(Reusable Components for App) | +-- Button.js | +-- Card.js +-- actions | +-- HeadlineAction.js +-- reducers | +-- HeadlineReducer.js +-- store | +-- store.js +-- screens | +-- HomeScreen.js +-- constants | +-- constants.js+-- App.js
..продолжение следует
