Redux管理状态-todoList实现

1、redux是什么？9

　　Redux就是React的状态管理工具

2、安装Redux: 

　　cnpm install -S redux

3、创建Store

　　我们在src下建一个store文件，里面有index，和reducer

下面我们创建store

//数据（可以是ajax请求的）
const defaultStaet = {
    //input的value
    inputValue: '',
    //未完成的
    listW: [],
    //已完成的
    listY: []
}

//导出
export default (state = defaultStaet, action) => {
   

    return state
}

store文件夹下面的index里引入reducer

import { createStore } from 'redux';
import reducer from './reducer';
export default createStore(reducer)

整体代码

List组件

import React, { Component } from 'react'
//子组件Input
import Input from './Input';
//store
import store from './store/index';

export default class List extends Component {
    constructor() {
        super()
        //获取store里的数据
        this.state = store.getState()
        //监听store，实时改变state数据
        store.subscribe(() => {
            this.setState(store.getState())
        })
    }

    //inputvalue的值
    myInputValue(e) {
        const action = {
            type: 'input-value',
            value: e.target.value
        }
        //每输入传给store
        store.dispatch(action)
    }

    //点击button按钮
    myButtonClick() {
        //获取输入框传给store里inputValue的值
        const action = {
            type: 'button-value',
            value: this.state.inputValue
        }
        //把值传给store
        store.dispatch(action)
    }

    //绑定键盘事件
    myKeyDown(e) {
        //判断是否摁下的是enter
        if (e.keyCode === 13) {
            //调用添加事件
            this.myButtonClick()
        }
    }

    //checkbox点击事件
    myCheckedChange(i, e) {
        if (e.target.checked) {
            //splice切割出来当前点击的
            let arr = this.state.listW.splice(i, 1)[0]
            //checked取反值
            arr.checked = !arr.checked
            const action = {
                type: 'checked-listW',
                value: arr
            }
            //把更改以后的数组传给store
            store.dispatch(action)
        } else {
            //splice切割出来当前点击的
            let arr = this.state.listY.splice(i, 1)[0]
            //checked取反值
            arr.checked = !arr.checked
            const action = {
                type: 'checked-listY',
                value: arr
            }
            //把更改以后的数组传给store
            store.dispatch(action)
        }
    }

    //删除按钮（未完成的）
    myButtonDeleteW(i) {
        //把当前点击的splice切割出来
        this.state.listW.splice(i, 1)
        const action = {
            type: 'listW-delete',
            value: this.state.listW
        }
        //把切割以后的数传给store
        store.dispatch(action)
    }

    //删除按钮（已完成的）
    myButtonDeleteY(i) {
        //把当前点击的splice切割出来
        this.state.listY.splice(i, 1)
        const action = {
            type: 'listY-delete',
            value: this.state.listY
        }
        //把切割以后的数传给store
        store.dispatch(action)
    }

    //点击内容改为可编辑状态
    myItemUpdate(e) {
        e.target.contentEditable = true
    }

    //数去焦点
    myItemBlur(i, e) {
        //把当前修改的数据的内容重新修改
        this.state.listW.splice(i, 1, { 'value': e.target.innerHTML, 'checked': false })
        const action = {
            type: 'item-update',
            value: this.state.listW
        }
        //改为不可编辑状态
        e.target.contentEditable = false
        //把修改后新的数组传给store
        store.dispatch(action)
    }

    render() {
        return (
            <React.Fragment>
                {/* 使用input */}
                {/* 把父组件方法myKeyDown传给子组件 */}
                {/* 把父组件方法myButtonClick传给子组件 */}
                {/* 把父组件里的this.state.inputValue传给子组件 */}
                {/* 把父组件方法myInputValue传给子组件 */}
                <Input myKeyDown={this.myKeyDown.bind(this)} myButtonClick={this.myButtonClick.bind(this)} value={this.state.inputValue} myInputValue={this.myInputValue.bind(this)} />
                {
                    <ul>
                        <h3>正在进行 ({this.state.listW.length})</h3>
                        {/* 遍历正在进行的 */}
                        {this.state.listW.map((item, index) => {
                            return <li key={index}>
                                <input type="checkbox" checked={item.checked ? true : false} onChange={this.myCheckedChange.bind(this, index)} />
                                <span onClick={this.myItemUpdate.bind(this)} onBlur={this.myItemBlur.bind(this, index)}>{item.value}</span>
                                <button onClick={this.myButtonDeleteW.bind(this, index)}>删除</button>
                            </li>
                        })}
                    </ul>
                }
                {
                    <ul>
                        <h3>已完成 ({this.state.listY.length})</h3>
                        {/* 遍历已完成的 */}
                        {this.state.listY.map((item, index) => {
                            return <li key={index}>
                                <input type="checkbox" checked={item.checked ? true : false} onChange={this.myCheckedChange.bind(this, index)} />
                                <span>{item.value}</span>
                                <button onClick={this.myButtonDeleteY.bind(this, index)}>删除</button>
                            </li>
                        })}
                    </ul>
                }
            </React.Fragment>
        )
    }
}

Input组件

import React, { Component } from 'react'

export default class Input extends Component {
    render() {
        return (
            <div>
                {/* value：实时更新value */}
                {/* onKeyDown键盘事件 */}
                {/* onChange实时监听input的value */}
                <input type="text" value={this.props.value} onKeyDown={this.props.myKeyDown} onChange={this.props.myInputValue} />
                {/* 点击添加事件 */}
                <button onClick={this.props.myButtonClick}>添加</button>
            </div>
        )
    }
}

reducer

//数据（可以是ajax请求的）
const defaultStaet = {
    //input的value
    inputValue: '',
    //未完成的
    listW: [],
    //已完成的
    listY: []
}

//导出
export default (state = defaultStaet, action) => {
    //input框输入的值
    if (action.type === 'input-value') {
        const newState = state
        //赋值给newState.inputValue
        newState.inputValue = action.value
        return newState
    }

    //点击button提交的内容
    if (action.type === 'button-value') {
        const newState = state
        //把input框的值以键值对push到，listWli。实现添加
        newState.listW.push({ 'value': action.value, 'checked': false })
        return newState
    }

    //点击checked，
    if (action.type === 'checked-listW') {
        const newState = state
        // 把当前点击的push到listYli，实现未完成的拿出来放到已完成里
        newState.listY.push(action.value)
        return newState
    }

    //点击checked
    if (action.type === 'checked-listY') {
        const newState = state
        // 把当前点击的push到listWli，实现已完成的拿出来放到未完成里
        newState.listW.push(action.value)
        return newState
    }

    //点击删除
    if (action.type === 'listW-delete') {
        const newState = state
        //把删除以后新的数组赋值给listW
        newState.listW = action.value
        return newState
    }

    //点击删除
    if (action.type === 'listY-delete') {
        const newState = state
        //把删除以后新的数组赋值给listY
        newState.listY = action.value
        return newState
    }
    //点击更新内容
    if (action.type === 'item-update') {
        const newState = state
        //把更改以后新的数组赋值给listW
        newState.listW = action.value
        return newState
    }

    return state
}