Online jQuery Redux

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    
    const { createStore } = Redux ;
    
   $("em").addClass("selected");
   $("#myid").addClass("highlight");


const postReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_POST':
            return state.concat([action.data])
        case 'DELETE_POST':
            return state.filter((post) => post.id !== action.id)
        case 'EDIT_POST':
            return state.map((post) => post.id === action.id ? { 
            ...post, editing: !post.editing } 
            : post)
        case 'UPDATE':
            return state.map((post) => {
                if (post.id === action.id) {
                    return {
                        ...post,
                        title: action.data.newTitle,
                        message: action.data.newMessage,
                        editing: !post.editing }
                } else return post ;
            })
        default:
            return state;
        }
}


 const title = 'titulo1';
 const message = 'mensaje1';
 const data = {
  id: new Date(),
  title: title,
  message: message,
  editing: false
 }
 $("#myid").text( data ) 
 
 const store = createStore(postReducer);
 
 let i = 0;
 
 store.subscribe ( () =>
       
        $("#myid").text( String(i) )  
 //alert('hi');
 )
 i = 1;
 
 const add = store.dispatch( { type: 'ADD_POST', data } );
 
 $("#myid").text( store.getState().title[0] ) 
 
  add()
 
 /*
 const func = store.subscribe ( () =>
 $("#myid").text( 'hi' ) 
 //alert('hi');
 )
 */
 //func();
 
 const f2 = (state = [], action) => {
     alert('hi peru')
     
 
 }

f2()
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>
Online jQuery Redux

Follow

Newsletter
