React Redux Task App
How do I make an react redux task app?
Building a clone of earlier React To Do Task App using Redux to handle store instead. Also utilizes ES6. What is a react redux task app? How do you make a react redux task app? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.
React Redux Task App - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Redux Task App</title>
</head>
<body> <div id="app">why no work?</div> <script src='https://fb.me/react-0.14.2.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js'></script>
<script src='https://fb.me/react-dom-0.14.2.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js'></script> <script src="js/index.js"></script>
</body>
</html>
React Redux Task App - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/* ACTIONS ------------
*/
var nextActiveId = 0;
var addTodo = function addTodo(text) { return { type: 'ADD_TODO', text: text, id: nextActiveId++ };
};
var toggleTodo = function toggleTodo(id) { return { type: 'TOGGLE_TODO', id: id };
};
/* REDUCERS -------------
*/
var combineReducers = Redux.combineReducers;
// for active tasks
var todoReducer = function todoReducer() { var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0]; var action = arguments[1]; switch (action.type) { case 'ADD_TODO': return { id: action.id, text: action.text, checked: false }; case 'TOGGLE_TODO': if (state.id !== action.id) { return state; } else { return Object.assign({}, state, { checked: !state.checked }); } case 'MOVE_TO_COMPLETED': if (state.id !== action.id) { return state; } else { return null; } default: return state; }
};
// for completed tasks
var doneReducer = function doneReducer() { var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0]; var action = arguments[1]; switch (action.type) { case 'MOVE_TO_COMPLETED': return { id: action.id, text: action.text, checked: true }; default: return state; }
};
var rootReducer = combineReducers({ todoReducer: todoReducer, doneReducer: doneReducer
});
/* STORE --------
*/
var store = function store(initialState) { return createStore(rootReducer, intialState);
};
/* PRESENTATIONAL COMPONENTS -------------------------
*/
var TaskApp = function (_React$Component) { _inherits(TaskApp, _React$Component); function TaskApp() { _classCallCheck(this, TaskApp); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } TaskApp.prototype.render = function render() { return React.createElement( 'div', null, React.createElement('input', { type: 'text', id: 'todo-input', placeholder: 'enter new task' }), React.createElement('input', { type: 'submit', id: 'submit-btn', className: 'btn' }) ); }; return TaskApp;
}(React.Component);
/* CONTAINER COMPONENTS -------------------------------
*/
var Provider = Redux.Provider;
var App = function (_React$Component2) { _inherits(App, _React$Component2); function App(props, context) { _classCallCheck(this, App); return _possibleConstructorReturn(this, _React$Component2.call(this, props, context)); } App.prototype.render = function render() { return React.createElement( Provider, { store: store }, React.createElement(TaskApp, null) ); }; return App;
}(React.Component);
/* CONNECT IT ALL UP -----------------
*/
var render = ReactDOM.render;
render(React.createElement(App, null), document.getElementById('app'));
Developer | Katie Inkblotty |
Username | inkblotty |
Uploaded | August 08, 2022 |
Rating | 3 |
Size | 3,587 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Svg path animation | 5,121 Kb |
Tic Tac Toe | 4,161 Kb |
Le Fake Bakery | 4,699 Kb |
Simon game | 5,088 Kb |
Portfolio Clone for FreeCodeCamp | 5,223 Kb |
Google Calendar Event Feed | 2,135 Kb |
GeoLocation | 1,752 Kb |
Star Wars search | 3,521 Kb |
Random Quote Generator | 2,980 Kb |
FCC Camper Leaderboard | 5,643 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
DNA Double Helix | Hugo | 5,112 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
P1 | Vivi_Lai | 1,533 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!