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 ...

Now Imagine, if these two components

need same state

Introduction

To Redux

Example with Redux

Principles of Redux

Single source of truth
State is read-only
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(),
   ]);
}

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

Single source of truth

State is read-only

Changes are made with pure functions

Architecture of Redux

Redux Middleware

Redux Application's without Middleware

Why use middlewares

Creating a Middleware

Integrating In Redux

Some of the famous Redux Middlewares

Redux Saga

Introduction

Concepts

Few Redux Saga Helpers

Adding Redux Saga

to the Redux Project

State of React Application

State of React Application

sarabs3

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

Single source of truth

State is read-only

Changes are made with pure functions

Architecture of Redux

Redux Middleware

Redux Application's without Middleware

Why use middlewares

Creating a Middleware

Integrating In Redux

Some of the famous Redux Middlewares

Redux Saga

Introduction

Concepts

Few Redux Saga Helpers

Adding Redux Saga

to the Redux Project

State of React Application

State of React Application

sarabs3

More from sarabs3