使用Redux编写简单的TodoList

创建项目

我使用的是create-react-app安装的TodoList项目

安装相关依赖

cnpm i antd redux

创建如图目录

代码及相关解释

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));

TodoList.js

import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
// 引入store,进行redux与react之间的数据信息交互
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.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
        // subscribe订阅store传来的数据
        store.subscribe(this.handleStoreChange);
    }
    render() {
        return (
            <div>
                <div style={{ marginTop:'10px', marginLeft:'10px', marginBottom:'10px'}}>
                    <Input 
                    placeholder="Todo Info" 
                    value={this.state.inputValue} 
                    style={{width:'300px',marginRight:'10px'}} 
                    onChange={this.handleInputChange}
                    />
                    <Button 
                    type="primary"
                    onClick={this.handleBtnClick}
                    >提交</Button>                    
                </div>
                <div style={{ marginLeft:'10px',width:'300px' }}>
                    <List
                        size="small"
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => <List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>}
                    />   
                </div>
            </div>
        )
    }
    // 执行input框内容
    handleInputChange(e){
        // 创建一个action用于执行输入框输入这一动作，这个动作包括用户的所要执行的动作信息和传输的数据，type：定义的动作类型，value：传输的数据
        const action = {
            type:'change_input_value',
            value:e.target.value
        }
        // 调用dispath方法将action传递给store
        store.dispatch(action);
    }
    // 数据的同步更新
    handleStoreChange() {
        // 同步更新数据
        this.setState(store.getState())
    }
    // 添加功能
    handleBtnClick() {
        const action = {
            type:'add_todo_item',
        };
        store.dispatch(action);
    }
    // 删除功能，index（上面传过来的）
    handleItemDelete(index) {
        const action = {
            type:'delete_todo_item',
            index
        }
        store.dispatch(action);
    }
}
export default TodoList;

store/index.js

// 引入redux中的createStore方法
import { createStore } from 'redux';
// 将管理员的小本本（reducer）引入过来让其与管理员配对，这个小本本就是属于这个管理员的
import reducer from './reducer'
// 定义一个store去管理这个小本本
const store = createStore(reducer);
export default store;

store/reducer.js

const defaultState = {
    inputValue:'',
    list: []
}
// reducer能够接收state，但是不能够修改state
export default (state = defaultState ,action) => {
    // state:存储数据 
    // action:用户传过来的那句话
    // 这里我们能够获得了TodoList.js传过来的信息，接下来我们拿到这些信息进行处理判断
    if(action.type === 'change_input_value') {
        // 深拷贝，我们想要将接收到的value实时的显示在页面上，我们就必须修改defaultState中的数据，但是reducer又绝不能进行修改state，所以我们进行深拷贝，修改拷贝后的内容。
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    if(action.type === 'add_todo_item') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue = '';
        return newState;
    }
    if(action.type === 'delete_todo_item') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1);
        return newState;
    }
    return state;
}

使用redux实现简单的todolist功能