Combine Redux and RxJS with pure html to understand how you can mix both and solve problem in a different way

full link->https://stackblitz.com/edit/typescript-u8ub9q?file=index.ts

html part----->

--------------------

<div id="app">

<input type="text" id="totalValue" value=":)"><br><br>

<input type="button" value="ADD NEW NUMBER" id="addMe"></button><br><br>

<input type="button" value="SUB TWO NUMBER" id="subMe"></button><br><br>

<input type="button" value="MUL NEW NUMBER" id="mulMe"></button><br><br>

<input type="button" value="DIV TWO NUMBER" id="divMe"></button><br><br>

</div>

//Javascript part

//REDUX-----------------------------------------------

/*starting with redux and rxjs with a simple example

what is redux

redux managed your application state and help's us organize code using store,Reducers,action and subsubscription

introduction=>https://redux.js.org/introduction/motivation

*/

//RxJS-----------------------------------------------

//RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.what i found usefull that you can combine multiple action with on a single data stream and based on those result you can handle error and sucess cases

//more about rxjs=>https://rxjs-dev.firebaseapp.com/guide/overview

//import createStore and combineReducers from redux

import {createStore,combineReducers} from "redux";

import {fromEvent} from "rxjs"

//create a mathReducer which would help you to slove math problem such as ad sub mul div

const mathReducer=(state=0,action)=>

{

var result=0;

switch(action.type)

{

case "ADD":

result=action.first+action.second;

break;

case "SUB":

result=action.first-action.second;

break;

case "MUL":

result=action.first*action.second;

break;

case "DIV":

result=Math.round(action.first+action.second);

break;

}

return result;

}

//create a instance of store

const store=createStore(mathReducer);

//differnt action based on math operation

const addAction={

type:"ADD",

first:25,

second:15

}

const subAction={

type:"SUB",

first:25,

second:15

}

const mulMul={

type:"MUL",

first:25,

second:15

}

const divMul={

type:"DIV",

first:25,

second:15

}

store.subscribe(()=>{

document.getElementById("totalValue").value="The Result is:-"+store.getState();

})

//add event ---------using rxjs

const clickActionForAdd = fromEvent(document.getElementById("addMe"), 'click');

clickActionForAdd.subscribe(x =>{

store.dispatch(addAction);

});

const clickActionForSub = fromEvent(document.getElementById("subMe"), 'click');

clickActionForSub .subscribe(x =>

{

store.dispatch(subAction);

}

);

const clickActionForMul = fromEvent(document.getElementById("mulMe"), 'click');

clickActionForMul .subscribe(x => {

store.dispatch(mulMul);

});

const clickActionForDiv= fromEvent(document.getElementById("divMe"), 'click');

clickActionForDiv .subscribe(x => {

store.dispatch(divMul);

});