用react-redux写个todolist的小demo(增删改)

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))
    }
    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(){
        this.setState(store.getState())
    }
    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)
    }
}

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

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))
    }
    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(){
        this.setState(store.getState())
    }
    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)
    }
}

import {createStore} from "redux"
import reducer from "./reducers"

const store = createStore(reducer)

export default store;

/*
    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":
            state.list.push(state.inputVal)
            state.inputVal = ""
            break;
        case "DEL_LIST":
            if (action.value >= 0) {
                state.list.splice(action.value, 1)
            }
            break;
        case "MODIFY_LIST":
            state.flag = !state.flag
            state.inputVal = state.list[action.value]
            state.indexTO = action.value
            break;
        case "UPDATE_LIST":    
            state.list.splice( state.indexTO,1,state.inputVal)
            state.inputVal = ""
            state.flag = !state.flag           
            break;
    }
    return state
}

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

}