zoukankan      html  css  js  c++  java
  • 用redux写个todolist的小demo(增删改)

    如何用redux写一个todolist呢?实现的功能有增删改

    components

    input.js

    import React, { Component } from 'react'
    import store from "../store"
    export default class Input extends Component {
        constructor(){
            super()
            this.state = store.getState()
            store.subscribe(this.handleUpdate.bind(this))
            this.status = true
        }
        render() {
            let {inputVal} = this.state
            return (
                <div>
                    <input type="text" value={inputVal} onChange={this.handleChange.bind(this)}/>
                    <button onClick={this.handleAdd.bind(this)}>添加</button>
                </div>
            )
        }
        handleUpdate(){
            if(this.status){
                this.setState(store.getState())
            } 
        }
        componentWillUnmount(){
            this.status = false
        }
        handleChange(e){
            let value = e.target.value;
            let action = {
                type:"CHANGE_VALUE",
                value
            }
            store.dispatch(action)
        }
        handleAdd(){
            let action = {
                type:"ADD_LIST"
            }
            store.dispatch(action)
        }
    }

    list.js

    import React, { Component } from 'react'
    import store from "../store"
    export default class List extends Component {
        constructor() {
            super()
            this.state = store.getState()
            store.subscribe(this.handleUpdate.bind(this))
        }
        render() {
            let { list } = this.state
            return (
                <div>
                    {
                        list.map((item, index) => (
                            <li key={index}>{item}
                            <button onClick={this.handleDel.bind(this,index)}>删除</button>
                            <button onClick={this.handleModify.bind(this,index)}>修改</button>
                            </li>
                        ))
                    }
                </div>
            )
        }
        handleUpdate() {
            this.setState(store.getState())
        }
        handleDel(index){
            let action = {
                type:"DEL_LIST",
                value:index
            }
            store.dispatch(action)
        }
        handleModify(index){
            let action = {
                type:"MODIFY_LIST",
                value:index
            }
            store.dispatch(action)
        }
    }

    modify.js

    import React, { Component } from 'react'
    import store from "../store"
    export default class Input extends Component {
        constructor(){
            super()
            this.state = store.getState()
            store.subscribe(this.handleUpdate.bind(this))
            
            this.status = true
        }
        render() {
            let {inputVal} = this.state
            return (
                <div>
                    <input type="text" value={inputVal} onChange={this.handleChange.bind(this)}/>
                    <button onClick={this.handleModify.bind(this)}>修改</button>
                </div>
            )
        }
        handleUpdate(){
            if(this.status){
                this.setState(store.getState())
            } 
        }
        componentWillUnmount(){
            this.status = false
        }
        handleChange(e){
            let value = e.target.value;
            let action = {
                type:"CHANGE_VALUE",
                value
            }
            store.dispatch(action)
        }
        handleModify(){
            let action = {
                type:"UPDATE_LIST",
            }
            store.dispatch(action)
        }
    }

    store

    index.js

    import {createStore} from "redux"
    import reducer from "./reducers"
    
    const store = createStore(reducer)
    
    export default store;

    reducers.js

    /*
        1、必须创建一个初始的state
        2、必须要返回一个纯函数
        3、纯函数中的state只允许读不允许修改   //会导致页面不更新
        4、纯函数必须要返回一个新的state
    
    */
    
    const defaultState = {
        inputVal: "",
        list: [],
        flag: true,
        indexTO: ""
    }
    export default (state = defaultState, action) => {
        switch (action.type) {
            case "CHANGE_VALUE":
                state.inputVal = action.value
                let inputValState = Object.assign({}, state)
                return inputValState
            case "ADD_LIST":
                let addState = Object.assign({}, state)
                addState.list.push(addState.inputVal)
                addState.inputVal = ""
                return addState
            case "DEL_LIST":
                let delState = Object.assign({}, state)
                delState.list.splice(action.value, 1)
                return delState
            case "MODIFY_LIST":
                let modifyState = Object.assign({}, state)
                modifyState.flag = !modifyState.flag
                modifyState.inputVal = modifyState.list[action.value]
                modifyState.indexTO = action.value
                return modifyState
            case "UPDATE_LIST":
                let updateState = Object.assign({}, state)
                updateState.list.splice(updateState.indexTO, 1, updateState.inputVal)
                updateState.inputVal = ""
                updateState.flag = !updateState.flag
                return updateState
    
            default:
                return state
        }
    
    }

    app.js

    import React, { Component } from 'react'
    import Input from "./components/input"
    import List from "./components/list"
    import Modify from "./components/modify"
    import store from "./store"
    export default class App extends Component {
        constructor() {
            super()
            this.state = store.getState()
            store.subscribe(this.handleUpdate.bind(this))
    
        }
        render() {
            let { flag } = this.state
            return (
                <div>
                    {flag ? <Input /> : <Modify />}
                    <List />
                </div>
            )
        }
        handleUpdate() {
            this.setState(store.getState())
        }
    
    }

  • 相关阅读:
    Java实现 LeetCode 27 移除元素
    Java实现 LeetCode 26 删除排序数组中的重复项
    Java实现 LeetCode 26 删除排序数组中的重复项
    Java实现 LeetCode 26 删除排序数组中的重复项
    Java实现 LeetCode 25 K个一组翻转链表
    Java实现 LeetCode 25 K个一组翻转链表
    Java实现 LeetCode 25 K个一组翻转链表
    Java实现 LeetCode 24 两两交换链表中的节点
    Java实现 LeetCode 24 两两交换链表中的节点
    Java实现 LeetCode 24 两两交换链表中的节点
  • 原文地址:https://www.cnblogs.com/shy0113/p/11385487.html
Copyright © 2011-2022 走看看