State of 

React Application

Every Component in

React has it's own local state

Local State can be passed

to child components as props

and ...

and ...

Now Imagine, if these two components

need same state

Introduction

To Redux

Example with Redux

Principles of Redux

  1. Single source of truth

  2. State is read-only

  3. Changes are made with pure functions

Architecture  of Redux

Redux Middleware

Redux Application's without Middleware

Why use middlewares

Making API calls

Validating the request

Logging

Crash reporting

Routing

Extending the request

Creating a Middleware

// Custom Middleware Function
const customMiddleware = ({ dispatch, getState }) => next => action => {
  if (action.type !== 'HELLO_FROM_MIDDLEWARE') {
    console.log('I am watching your actions', action);
    dispatch({ type: 'HELLO_FROM_MIDDLEWARE' });
  }
  next(action);
};
export default createStore(
  combineReducers({ CommonReducer }),
  applyMiddleware(sagaMiddleware, custom)
);

Integrating In Redux

Some of the famous Redux Middlewares

Redux Saga (Effect Handling Modal)

Redux Thunk (Async operations in Redux)

Redux Logger (Logging the Redux Actions)

 

Redux Saga

Introduction

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures

Source: https://redux-saga.js.org/

Concepts

 

  • Generator Functions
  • Yield
  • Next
  • Yield*

Redux Saga uses Javascript's Generator functions to handle side effects

function* generator(k) {
  yield k;
  yield k + 5;
}

var gen = generator(25);

console.log(gen.next().value);
// expected output: 25

console.log(gen.next().value);
// expected output: 30

  • Call
  • Put
  • Take Every
  • Take Latest

Few Redux Saga Helpers

import { put, takeLatest, all } from 'redux-saga/effects';
function* fetchNews() {
  const json = yield fetch('https://newsapi.org/v1/articles? 
        source= cnn&apiKey=c39a26d9c12f48dba2a5c00e35684ecc')
        .then(response => response.json(), );    
  yield put({ type: "NEWS_RECEIVED", json: json.articles, });
}
function* actionWatcher() {
     yield takeLatest('GET_NEWS', fetchNews)
}
export default function* rootSaga() {
   yield all([
   actionWatcher(),
   ]);
}

Adding Redux Saga

to the Redux Project

https://codesandbox.io/s/github/sarabs3UC/with-saga-meetup3

Made with Slides.com