Steps of integrating redux, react-redux into React Native component

1_App.jsx

// App.js is the root component of the RN app.
import React, { Component } from 'react';
import {  View, } from 'react-native';

// Your custom components
import { Header } from './components/common';
import LibraryList from './components/LibraryList';

// 1. Import redux's createStore function & react-redux's Provider component
import { createStore } from 'redux';
import { Provider } from 'react-redux';

// 2. Import the index of your combined reducers
import reducers from  './reducers';

export default class App extends Component {
  render() {
    return (
      { /* 3. Wrap the root View with the Provider component, and set its store properties with a call to createStore method whic takes combined reducers as its parameter*/}
      <Provider store={ createStore(reducers)} >
        <View style={{ flex:1 }}>
          { /* Your composite components here (e.g. Header, main content) */ }
          <Header title="Tech Stack"/>     
          <LibraryList />          
        </View>
      </Provider>
    );
  }
}

2_reducers_index.js

// 1. Import combineReducers function from 'redux'
import { combineReducers } from 'redux';

// 2. Declare the reducers (functions which takes dispatched Action and react against it, in Flux pattern).
//    Note: Ideally, we declare the reducers into separate .js files (e.g. LibraryReducer.js, SelectionReducer.js) and then import them in here. 
const LibraryReducer = () => [{ id: 1, name: "John Wick"}, { id:2, name: "Diana Prince" }];
const SelectionReducer = (state = null, action) => {
  switch(action.type) {
    case 'select_library':
      return action.payload;
    default:
      return state;
  }
}

// 3. Map the reducers into their corresponding states, that are going to be managed by the redux store.
const state = {
  libraries: LibraryReducer,
  selectedLibraryId: SelectionReducer
};

// 4. call the combineReducers method and takes the state as its argument, then export it as a default exported type.
export default combineReducers(state);

3_actions_index.js

// Action is a command object, created and dispatched by a client (e.g. component) to Redux store, to be picked by Reducer for processing specific logic specified by the dispatched Action's type property. See: https://gist.github.com/WendySanarwanto/8b7a3cf0eb940a6ea7a8c719341e82f8

// In React-Redux, we don't declare them as a standalone JSON variables. Instead, we create method(s) which export the Action object. These methods are called `ActionCreator` method. 

// 1. Declare & export ActionCreator method for returning select_library action. The action object consist 2 properties:
//    `type` (indicates action type) and `payload` (contains action's arguments) 
export const selectLibrary = (libraryId) => {
  return {
    type: 'select_library',
    payload: libraryId
  };
};

4_components_LibraryList.jsx

// Connecting a component to redux's state via redux's status-props mapping

import React, { Component } from 'react';
import {  ListView } from 'react-native';
import ListItem from './ListItem';

// 1. Import connect function from react-redux
import { connect } from 'react-redux';

class LibraryList extends Component {

  componentWillMount() {
    // 4. Mapped redux's state is available on current component's props
    const { libraries } = this.props;
    const dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = dataSource.cloneWithRows(libraries);
  }

  renderRow(library) {
    return <ListItem item={library} />
  }

  render() {
    return (
      <ListView 
        dataSource={this.dataSource}
        renderRow={this.renderRow} />
    );
  }
}

// 2. Create a function which maps received redux's state into component's props
const mapStateToProps = state => {
  // console.log(`[DEBUG] - <LibraryList.mapStateToProps> - state: \n`, state);
  return {
    libraries: state.libraries
  };
};

// 3. Call connect method which takes the mapStateToProps function as its argument, then call its returned function and pass the component class. Export the called function's result as a default exported Component type.
export default connect(mapStateToProps)(LibraryList);