Redux实现简易Todolist

React-Transition-Group

React动画组件库实现css3过渡动画效果

用法其实我没怎么看直接快进想快点进入项目阶段

数据Mock

其实有很多工具我推荐Mock.js

Redux

Redux官网

之前看过一次云里雾里 也是难点

视图层框架 React 其实看完之后才觉得如果对业务逻辑特别清楚写Redux还是很清楚的
所以需要数据层框架 Redux 可以把Redux理解成 "物流分发点" Redux = > Reducer + flux

Web 应用是一个状态机视图跟状态是一一对应的 2.所有状态保存在一个对象里
——阮一峰大佬解释Redux就是两句话

Redux工作流程

Redux workflow

Ant + Redux 实现Todolist

antd 官网
按照官网安装即可
下载时间有点久

优先编写Store

注意流程

安装redux devtools

跟着视频实现了一遍自己又实现了一遍受益匪浅

核心步骤

组件欲更改state 通过action传递给store
dispatch(action)传递给store -> store自动将state,action 传递给reducer
reducer接受action 操作state 并返回新state
store接受新state 传递给组件
组件store.subscribe() 得到新state 渲染组件

Redux核心步骤

createStore
store.dispathch
store.getState
store.subscribe
听得时候以为自己能写出来但是还是卡主了自己实现一遍或者增加功能试试看理解的更透彻

ActionTypes的拆分

ActionCreator统一创建action

把最终代码贴上

Todolist

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
// 第三步引入之前创建好的store
import store from './store/index.js'

class Todolist extends Component {

    constructor(props){
        super(props)
        this.state = store.getState()
            
        this.handleInputChange = this.handleInputChange.bind(this)   
        this.hanleStoreStateChange = this.hanleStoreStateChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        //reducer传递给store新state store接受后state改变 立即执行subscribe()方法
        store.subscribe(this.hanleStoreStateChange)
    }

    render() {
      
        return (

            <div style={{width:'500px',margin:'0 auto'}}>
                <h1>Hello World!</h1>
                <div>
                    <Input 
                    value={this.state.inputValue} 
                    placeholder="请输入内容" 
                    style={{ width: '400px', marginRight: '10px' }} 
                    onChange={this.handleInputChange}
                    />

                    <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
                </div>

                <List
                    style={{marginTop:'20px',width: '400px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item,index) => (
                        <List.Item onClick={this.handleItemDelete.bind(this,index)}>
                            {item}
                        </List.Item>
                    )}
                />
            </div>
        )
    }

    handleInputChange(e){
        // 创建action命令 
        const val = e.target.value
        const action = {
            type:'change_input_value',
            value:val
        }

        // 把命令传递给store
        store.dispatch(action)
        
        //store会自动把命令(action)跟state 传递给reducer
    }

    // 这个函数被立即执行
    hanleStoreStateChange(){
        console.log('store changed see what happened')
        console.log(store.getState())
        this.setState(store.getState())
    }


    handleBtnClick(){
        const action = {
            type:'add_item'
        }

        store.dispatch(action)

    }


    handleItemDelete(index){
        console.log(index)

        const action = {
            type:'delete_item',
            index
        }

        store.dispatch(action)
    }

}

export default Todolist;

store

import {createStore} from 'redux';
import reducer from './reducer'
// 第二步把生成的仓库管理 交给store(管理员)
const store = createStore(reducer);

export default store;

reducer


// 第一步创建仓库
//数据仓库里目前有两个数据
const defaultState = {
    inputValue:'',
    list:[1,2,3]
}
// reducer可以接受state 绝不能修改state
export default (state=defaultState,action)=>{
    //store可以自动把state跟action 传递给reducer
    //reducer处理过传来的state之后 再把新state传递给store

    console.log(state,action)
    if(action.type ==='change_input_value'){
        // 在这里做个深拷贝
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }



    if(action.type ==='add_item'){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if(action.type === 'delete_item'){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        return newState
    }
    //state 可以理解为所有数据
    return state
}

最终界面