Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.