(by @andrestaltz)
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.
// 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(){ |
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 => { |
// 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 |
// Dependencies | |
const { applyMiddleware, createStore } = Redux; | |
const { connect, Provider } = ReactRedux; | |
// GitHub API | |
const gitHubApi = (username) => { | |
// Put your Api call here | |
}; | |
// redux-thunk implementation |
// 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 }); |
// 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); |
// 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 | |
}; |
(by @andrestaltz)
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.
#!/bin/bash | |
# REQUIRES SUDO | |
# Benchmark runner | |
repeats=20 | |
output_file='benchmark_results.csv' | |
command_to_run='echo 1' | |
run_tests() { | |
# -------------------------------------------------------------------------- |
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. |