rowlandekemezie

// It's worthy of note that Javascript is not a class-oriented language. It's strength is in its native nature.
// Basically, Javascript is a prototypal language and thus uses prototypal inheritance for its operations.
// The example below is a tip of how the prototypal nature of javascript can be utilized


// Implementing the use of 'arguments' object to pass arguments to a funcion
function foo() {
    bar.apply(null, arguments)	
}
function bar(){

rowlandekemezie

const { applyMiddleware, createStore } = Redux;
const createSagaMiddleware = ReduxSaga.default;
const { put, call } = ReduxSaga.effects;
const { takeLatest } = ReduxSaga;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
  return fetch(`https://api.github.com/users/${username}`)
    .then(response => {

rowlandekemezie

// UserProfile Component
class UserProfile extends React.Component {
  constructor() {
    super();
    this.state = {
      user: []
    }
  }
  // componentDidMount lifecycle method allows dynamic behaviour, AJAX, 
  // side effects, etc. We issue our API call here and set the 

rowlandekemezie

// Dependencies
const { applyMiddleware, createStore } = Redux;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
   // Put your Api call here
};

// redux-thunk implementation

rowlandekemezie

// Here, we use ES6 destructuring assignment to extract payload
// from the action object passed to it.
function* loadUserDetails({ payload }) {
  try {
    const user = yield call(gitHubApi, payload);
    // Yields effect to the reducer specifying action type 
    // and user details.
    yield put({type: 'LOAD_USER_SUCCESS', user}); 
  } catch (error) {
    yield put({ type: 'LOAD_USER_FAILURE', error });

rowlandekemezie

// Initialize the saga middleware
const sagaMiddleware = createSagaMiddleware();

// Inject middleware to the store
const store = createStore(userReducer, applyMiddleware(sagaMiddleware));

// Run the sagas you defined. 
// You would normally have a rootSaga were you register all your saga 
// Or spread then in the run function. 
sagaMiddleware.run(watchRequest);

rowlandekemezie

// Dependencies
const { applyMiddleware, createStore } = Redux;
const createSagaMiddleware = ReduxSaga.default;
const { put, call, takeLatest } = ReduxSaga.effects;
const { connect, Provider } = ReactRedux;

// GitHub API
const gitHubApi = (username) => {
  // Make API calls here
};

rowlandekemezie

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

rowlandekemezie

#!/bin/bash
# REQUIRES SUDO
# Benchmark runner

repeats=20
output_file='benchmark_results.csv'
command_to_run='echo 1'

run_tests() {
    # --------------------------------------------------------------------------

rowlandekemezie

In the [first part](https://pub.scotch.io/@rowland/build-a-media-library-with-react-redux-and-redux-saga-part-1) of this tutorial, we had a running app. We covered basic React setup, project workflow; defined basic components and configured our application's routes.

In part 2 of this tutorial, which is unarguably the most interesting part of building React/redux application, we will setup application state management with redux, connect our React components to the store, and then deploy to Heroku. We will walk through this part in eight steps:

1. Define Endpoints of interest.
2. Create a container component.
3. Define action creators.
4. Setup state management system.
5.  Define async task handlers.
6. Create presentational components.