React side with Redux

Zarad toga, napravićemo novu komponentu koja će prikazivati našu listu. Unutar direktorijuma components napravićemo novi fajl TechnologyList.js . TechnologyList će biti za sada jednostavna Class Based komponenta.

import React, { Component } from 'react';

class TechnologyList extends Component {
  render() {
    return;
  }
}

export default TechnologyList;

Sada ćemo povezati komponentu i App State (unutar koga se nalazi potrebna lista) koristeći Connect helper koju obezbeđuje redux biblioteka. Connect helper jednostavno konektuje React komponentu sa Redux store-om.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class TechnologyList extends Component {
  render() {
    console.log(this.props);
    return ;
  }
}

const mapStateToProps = state => {
  return {
    libraries: state.libraries
  };
};

export default connect(mapStateToProps)(TechnologyList);

Sta se dešava ovde je sledeće: Proces od dva koraka - poziva se funkcija connect koja kao parametar prima drugu funkciju (u našem slučaju je to mapStateToProps , koja uzima globalni state objekat i mapira ga na određeni način pri čemu tu mapiranu data-u obezbeđuje kao props komponenti - libraries: state.libraries) . Kada se ona pozove ona vraća drugu funkciju, i ta funkcija se odmah poziva sa parametrom TechnologyList.

Ubacili smo i console.log() unutar render metode kako bi videli šta nam je mapStateToProps kao props komponente obezbedila. Prvo moramo import-ovati komponetnu unutar app.js

...
import TechnologyList from './components/TechnologyList';

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

Ukoliko refresh-ujete svoj simulator videćete prijavljenu grešku, to je zato što ne vraćamo nikakav kod unutar render metode, ali nam je to dovljno da u konzoli vidimo this.prop komponente.

Tu je array libraries koji smo definisali u našem reducer-u i dispatch funkcija koju connect() obezvbeđuje i koja služi za pozivanje akcija. Ali o njoj ćemo kasnije. Ovo znači da smo uspeli da povežemo komponentu i i app state, i da nam je lista koju treba da prikažemo dostupna u props-ima komponente. (Pristupićemo joj sa this.props.libraries ).

Ako se pitate kako je ova lista stigla do app state-a a da ni jedan akcija nije pozvana, to je zato što se pri prvom renderovanju aplikacije pozivaju svi registrovani reducer-i (oni koji su smešteni unutar combineReducers). Zato je potrebno razmišljati o tome kakav inital state treba biti property-ju unutar global app state-a.