Redux u aplikaciji

Potrebno je da instaliramo redux kao i react-redux biblioteke u našoj aplikaciji. U konzoli unutar foldera aplikacije kucamo sledeće

npm install --save redux react-redux

Nakon što je instalacija završena možemo krenuti sa postavljanjem projekta. Iskoristićemo "boilerplate" koji smo koristili i u prethodnom projektu. Ono što je potrebno da uradite je sledeće:

• Napraviti src folder
• Unutar njega napraviti app.js folder sa sledećim kodom

import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View />
  );
};

export default App;

• index.android.js i index.ios.js treba promeniti da budu identični i da koriste App komponentu pri registraciji

import { AppRegistry } from 'react-native';
import App from './src/app';

AppRegistry.registerComponent('tech_info', () => App);

To je to za početak. Sada kada pokrenemo projekat na simulatoru se vidi prazna strana. Krenimo sa korišćenjem Redux-a.

Prvo ćemo importovati Provider iz redux-react biblioteke kao i createStore iz Redux biblioteke unutar app.js

import { Provider } from 'react-redux';
import { createStore } from 'redux';

Zatim ih iskoristimo unutar komponente

const App = () => {
  return (
    <Provider store={ createStore }>
      <View />
    </Provider>
  );
};

Provider tag radi sa store-om, svaki ima specificni posao, store sadrzi app state (svu data-u). A provider omogućava da je ta data unutar state-a dostupna react strani aplikacije (svim komponentama). Znaci store sadrži svu data-u dok Provider predstavlja način komunikacije izmedju store-a i react komponenti.

Treba shvatiti da Redux kao Redux nije napravljen za potrebe React aplikacija, već se može implementirati gde god i uz bilo koju drugu tehnologiju. Za potrebe povezivanja i korišćenja Redux-a unutar React aplikacija koristimo redux-react biblioteku. I u ovom slučaju taj spoj ostvarujemo pomoću Provider-a koji nam react-redux obezbedjuje.

Sledeći korak jeste da napravimo Reducer i da ga prosledimo createStore metodi. Potrebno je da unutar src foldera napravimo novi folder sa imenom reducers a unutar njega fajl index.js

Unutar reducer foldera možemo imati definisanih više reducer-a ali svi oni će biti import-ovani unutar index.js folder-a i odatle će biti dostupni ostatku aplikacije, i to na sledeći način

import { combineReducers } from 'redux';

export default combineReducers({
  libraries: () => []
});

U većim aplikacijama zbog čistoće i razumevanja (i zdravog razuma) pravićete mnogo reducer-a i zato je potrebno da imate ovakav fajl koji će koristi combineReducers iz biblioteke redux i na taj način od svih ovde import-ovanih reducer-a napraviti jedan koji ćemo proslediti našem aplikacionom Store-u. U ovom slučaju imamo reducer sa nazivom "libraries" i hardcode-ovali smo da vraća prazan array (ovo ćemo promeniti uskoro). Prosledimo sada ovaj reducer createStore metodi (unutar app.js) . Prvo import-ujemo:

import reducers from './reducers';

Nema potrebe pisati './reducers/index.js' jer ukoliko ostavite prazno iza imena foldera, podrazumeva se da se traži index.js unutar njega.

I jos App komponenta

const App = () => {
  return (
    <Provider store={ createStore(reducers) }>
      <View />
    </Provider>
  );
};

Ovo je najminimalniji kod za uvodjenje Redux-a u našu aplikaciju. Za sada smo

Kreirali Store i prosledili ga Provider komponenti. Zatim smo napravili reducer i prosledili ga store -u aplikacije.

Kao što smo uradili i u prethodnom projektu i ovde ćemo prekopirati komponente koje su "česte". Zato napravimo unutar src foldera još jedan folder sa imenom components i prekopiraje fajlove Button.js, Card.js, CardSection.js, Header.js, Input.js, Loader.js. Iz ovog razloga smo ih i pravili da budu reusable komponente, kako bi se mogle koristiti na više mesta.

Sada unutar naše App komponente iskoristimo Header. Prvo ćemo ga import-ovati

import Header from './components/Header';

A onda iskoristi unutar Provider komponente. Jedan bitna osobina Provider komponente je to što ona može imati samo jednu child komponentu, tako da ćemo Header komponentu smestiti unutar View taga, i posle toga unutar iskog View taga možemo smeštati koliko želimo drugih komponenti.

const App = () => {
  return (
    <Provider store={ createStore(reducers) }>
      <View>
        <Header headerText='Tech Info' />
      </View>
    </Provider>
  );
};