Нека първо разберем какво е Redux ?

Redux е JavaScript библиотека за управление на състоянието за вашето приложение, тя може да се използва с React , Angular , React Native за поддържане на състоянието на вашето приложение.

Защо Redux ?

Redux може да поддържа състоянието на вашето приложение в едно хранилище, така че не е нужно да се притеснявате как състоянието може да се управлява във вашето приложение.

Нека вземем прост пример, ако имате стойност на състояние, наречена „cartCount“ за управление на количка за приложение за електронна търговия. Ако искате да показвате „cartCount“ във всяко приложение на всеки екран на приложение, както правят Amazon и други приложения за електронна търговия. Как ще получите тази стойност на състоянието на всички екрани в приложението без Redux ?

Ето решението🙂

Използвайте Redux за управление на състоянието на приложението

Как да използвате Redux с React-Native

Надявам се, че имате основно разбиране за React-Native like

  • Настройка на проекта
  • Структура на папката
  • Разбиране на кода на 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

..следва продължение