redux实现简单的todoList

Redux是什么，其实Redux就是React的状态管理工具，就相当于vue中的vuex，也是状态管理工具。个人感觉redux要比vuex要复杂的多，本文是用redux实现todoList的小demo。

先来看看reduxd 运行机制吧，官网上有的。Action描述事件简单对象，它是改变store中state的唯一方法，通过store.dispatch()方法将Action传到store中。Action的作用只是传递数据，并没有更新数据，如何更新数据Reducer的工作。Reducer接收到Action传入的对应数据，更新数据后返回到store，更新页面。简化来讲，用户触发事件 ->action(dispatch分发) -> store -> Reducer更新数据 -> 返回更新后的数据到store -> 更新页面。

我个人的简单理解是我去图书馆(store)借书，我（component）向图书管理员说出(store.dispatch(action))来我要的书(state)，图书管理员通过图书信息手册（reducer）查找书名(action.type),再把书给我(更新数据) ~~~(个人理解…有点挫，希望大佬指正)

下面是todolist的样式图：

下面是 todolist代码：

import React, { Component, Fragment } from 'react'
import 'antd/dist/antd.css';
import { Input, List, Button } from 'antd'
import store from './store'

class Todolist extends Component {
    constructor(props) {
        super(props)
        // 获取状态  返回对象
        console.log(store.getState());
        // 初始化获取
        this.state = store.getState()

        this.changeHandle = this.changeHandle.bind(this)
        this.handlerStoreChange = this.handlerStoreChange.bind(this)
        this.addItem = this.addItem.bind(this)
        this.deleteItem = this.deleteItem.bind(this)
        // 只要store中数据发送变化 subscribe就执行
        // 参数为函数 不要加执行符
        store.subscribe(this.handlerStoreChange)
    }
    render() {
        return (
            <Fragment>
                <div style={{'margin':'0 auto','width':'400px'}}>
                    <Input placeholder="TodoList" style={{ "width": "300px" }} onChange={this.changeHandle} value={this.state.iptVal} />
                    <Button type="primary" style={{ "margin": "10px" }} onClick={this.addItem}>提交</Button>
                    <div>
                        <List
                            style={{ "width": "370px" }}
                            header={<div>header</div>}
                            footer={<div>Footer</div>}
                            bordered
                            dataSource={this.state.list}
                            renderItem={(item, index) => {
                                return <List.Item key={index} onClick={()=>{
                                return  this.deleteItem(index)
                                }}>{item}</List.Item>
                            }}
                        >
                        </List>
                    </div>
                </div>
            </Fragment>
        )
    }
    changeHandle(e) {
        console.log(e.target.value);

        // 定义action
        const action = {
            type: 'change_input_value', //action类型
            value: e.target.value
        }
        store.dispatch(action)  //dispatch 把active 通知到store
    }
    // 只要store 对象中数据发生了变化；就需要重新获取 数据
    handlerStoreChange() {
        this.setState(store.getState())
    }
    addItem() {
        const action = {
            type: 'add_todolist_item',
        }
        store.dispatch(action)
    }
    deleteItem(index){
        const action = {
            type: 'delete_todolist_item',
            index
        }
        store.dispatch(action)
    }
}

export default Todolist

store下index.js

import { createStore } from 'redux'
import reducer from './reducer'

// store 可以使用reducer了  以下可以看做固定写法
const store = createStore(
    reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
//创建store 图书管理员

export default store

reducer.js

// 图书信息记录本
const  defaultState={
    iptVal:'123',
    list:['好开心']
    
}
export default (state=defaultState,action)=>{
     
    if(action.type==='change_input_value'){
        // reducer 知道了要修改的iptval数据
        //reducer 不能直接修改state中数据
        const newState=JSON.parse(JSON.stringify(state)) //实现深拷贝state
        newState.iptVal=action.value
        return newState
    }
    if(action.type==='add_todolist_item'){
        const newState=JSON.parse(JSON.stringify(state)) //实现深拷贝state
        newState.list.push(newState.iptVal)
        newState.iptVal=''
        return newState
    }
    if(action.type==='delete_todolist_item'){
        const newState=JSON.parse(JSON.stringify(state)) //实现深拷贝state
        newState.list.splice(action.index,1)
        newState.iptVal=''
        return newState
    }


    // 将state状态返回给 store
    return state
}