用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())
    }

}