How does React+Redux implement a simple to-do list ToDoList
The knowledge of this article "React+Redux how to achieve a simple to-do list ToDoList" is not understood by most people, so the editor summarizes the following content to you, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "React+Redux how to achieve a simple to-do list ToDoList" article.
Functional style
That's what it looks like.
Enter the to-do list in the input box
The function is simple.
Mouse click Add or keyboard press Enter output
ShowAll shows all to-do items
ShowActive shows unfinished to-do items (uncrossed)
ShowCrossed shows completed to-do items (crossed out)
Configuration file
The folders built using Webpack are as follows
Webpack.config.js profile
Module.exports = {entry: {index:'. / src/js/entry.js'}, output: {path:'. / static/dist/', publicPath: 'http://localhost:8080/static/dist/', filename:' [name] .js'}, module: {loaders: [{test: /\ .js $/, loader: 'babel', exclude:/node_modules/, query: {presets: [' react', 'es2015']} {test: / .less$/, loader: 'stylebones csswords lesson'}
Dependencies of package.json
{"name": "react-demo", "version": "1.0.0", "description": "," main ":" webpack.config.js "," scripts ": {" test ":" echo\ "Error: no test specified\" & exit 1 "," diy ":" webpack-dev-server-- progress-- colors-- devtool sourcemap "}," author ":" Payson "," license ":" ISC " "devDependencies": {"babel-core": "^ 6.22.1", "babel-loader": "^ 6.2.10", "babel-preset-es2015": "^ 6.22.0", "babel-preset-react": "^ 6.22.0", "css-loader": "^ 0.26.1", "jquery": "^ 3.1.1", "less": "^ 2.7.2" "less-loader": "^ 2.2.3", "react": "^ 15.4.2", "react-dom": "^ 15.4.2", "react-redux": "^ 5.0.2", "redux": "^ 3.6.0", "style-loader": "^ 0.13.1", "webpack": "^ 1.14.0", "webpack-dev-server": "^ 1.16.2"}}
Html file
React
Script file
Did not break down the files.
Write it directly in the entry file entry.js
The comments are written in the code.
Require ('.. / less/index.less'); / / the interline style is restricted and pseudo-class pseudo-elements cannot be added, so less (css) control style import React from 'react';import {Component} from' react'import ReactDom from 'react-dom';import {createStore, combineReducers} from' redux';class ToDoList extends Component {addHandler () {/ / add listener let Inp = this.refs.Inp for to-do items / / get the input value if (! Inp.value) of the real DOM {/ / if there is no input value, directly return return;} store.dispatch (/ / dispatch an action to add the project, and pass in the input data {type: 'ADD_ITEM', newItem: Inp.value}) Inp.value =''; / / after submission, clear the input Inp.focus () / / reset input focus} toggleHandler (item) {/ / Action Creator: action store.dispatch ({type: 'TOGGLE_ITEM', changeID: item.ID}) responsible for handover submission;} showAllHandler () {/ / Action Creator: action store.dispatch responsible for showAll ({type:' SET_FILTER', filter: 'SHOW_ALL'}) } showActiveHandler () {/ / Action Creator: action store.dispatch in charge of showActive ({type: 'SET_FILTER', filter:' SHOW_ACTIVE'});} showCrossedHandler () {/ / Action Creator: action store.dispatch in charge of showCrossed ({type: 'SET_FILTER', filter:' SHOW_CROSSED'});} render () {/ / render structure style let _ this = this; / / cache this let state = store.getState () / / Cache the snapshot of store-- state let {list, option} = state / / deconstructing the assignment to get two children state / / list is an array, and the internal array element is an object indicating that each list item / / option is a string, indicating that the first option selected is switch (option) {/ / decide whether to filter the list array case 'SHOW_ACTIVE': list = list.filter (function (item) {return! item.del;}) by judging the current option string; break Case 'SHOW_CROSSED': list = list.filter (function (item) {return item.del;}); break;} document.body.addEventListener (' keydown', function (e) {if (e.which = = 13) {_ this.addHandler ();}}) / / bind keyboard enter event return (/ / set the ref attribute in order to get the real DOM node Add ShowAll ShowActive ShowCrossed / / determine the option string to determine the style of the three options {list.map (function (item, index) {/ / map to virtual DOM node return {item.item}} through the list array map)} const list = (state = [] Action) = > {/ / list-reducer switch (action.type) {case 'ADD_ITEM': return [... state, {item: action.newItem, / / list item content ID: state.length, / / list item ID del: false / / whether the list item has been crossed out}] Case 'TOGGLE_ITEM': return state.map ((item) = > {return Object.assign ({}, item, {del: action.changeID = = item.ID?! item.del: item.del});}); default: return state;}} const option = (state =' SHOW_ALL', action) = > {/ / option-reducer switch (action.type) {case 'SET_FILTER': return action.filter; default: return state;}} const reducer = combineReducers ({list, option}) / / use redux library API-combineReducers () to merge reducerconst store = createStore (reducer); / / use redux library API-createStore () to create storeconst render = () = > {/ / custom rendering function ReactDom.render (, document.getElementById ('root'));} store.subscribe (render); / / bind render function to execute render () every time state is updated; / / render for the first time
Style file
Add some style control to the index.less file
.option {list-style-type: none; padding: 0; margin-top: 5px; font-size: 13px; li {float: left; margin-right: 15px; span {cursor: pointer; font-weight: bold;}} &:: after {content:'; display: block; clear: both;}}. List {li {span {&: hover {color: # f40; cursor: pointer;} &: selection {color: # 000; background-color: # fff }} the above is the content of this article on "how to implement a simple to-do list ToDoList in React+Redux". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
