React redux配置使用react-redux redux-thunk 实现todolist (二)

淩亂°似流年 2023-07-11 05:49 29阅读 0赞

> 使用 redux 进行统一状态管理，实现 todolist 功能

// views/todolist/TodoList.tsx
    import * as React from 'react';
    import {  connect } from 'react-redux';
    import {  inputValueAction, addListAction, deleteListAction, getListAction, getTodoListThunkAction } from '../../store/action';
    import TodoListTemplate from './TodoListTemplate';
    import TodoListFunction from './TodoListFunction';
    
    interface IProps { 
    }
    
    interface IState { 
    }
    
    // @ts-ignore
    @connect(state => ({  state }), {  inputValueAction, addListAction, deleteListAction, getListAction, getTodoListThunkAction })
    export default class TodoList extends React.Component<IProps, IState> { 
    
      // 获取数据
      componentDidMount(): void { 
        const {  getTodoListThunkAction }: any = this.props;
        getTodoListThunkAction();
      }
    
      /** * 监听 input 变化 * @param e */
      handleChange = (e: React.FormEvent<HTMLInputElement>) => { 
        const {  value }: any = e.target;
        const {  inputValueAction }: any = this.props;
        inputValueAction(value);
      };
    
      /** * 添加 */
      handleAdd = () => { 
        const {  addListAction }: any = this.props;
        addListAction();
      };
    
      /** * 删除 * @param i */
      handleDelete = (i: number) => { 
        const {  deleteListAction }: any = this.props;
        deleteListAction(i);
      };
    
      public render() { 
        const {  state }: any = this.props;
        return (
          <React.Fragment>
            { /* 状态组件 */}
            <TodoListTemplate inputValue={  state.inputValue } list={  state.list } handleChange={  this.handleChange } handleAdd={  this.handleAdd } handleDelete={  this.handleDelete } />
            { /* 无状态组件 */}
            <TodoListFunction inputValue={  state.inputValue } list={  state.list } handleChange={  this.handleChange } handleAdd={  this.handleAdd } handleDelete={  this.handleDelete } />
          </React.Fragment>
        );
      }
    }

// views/todolist/TodoListTemplate.tsx
    import * as React from 'react';
    import {  Input, Button, List } from 'antd';
    import './todolist.css';
    
    interface IProps { 
      inputValue: string,
      list: any,
      handleChange: any,
      handleAdd: any,
      handleDelete: any
    }
    
    interface IState { 
    }
    
    export default class TodoListTemplate extends React.Component<IProps, IState> { 
    
      public render() { 
        const {  inputValue, list, handleChange, handleAdd, handleDelete }: any = this.props;
        return (
          <React.Fragment>
            <div className="box-style">
              <Input value={  inputValue } onChange={  handleChange } className="input-style" />
              <Button type="primary" onClick={  handleAdd }>增加</Button>
            </div>
            <div className="box-style list-style">
              <List bordered dataSource={  list } renderItem={ (item: string, index: number) => (<List.Item onClick={  () => handleDelete(index) }>{  item }</List.Item>)} />
            </div>
          </React.Fragment>
        );
      }
    }

// views/todolist/TodoListFunction.tsx
    import * as React from 'react';
    import {  Input, Button, List } from 'antd';
    import './todolist.css';
    
    const TodoListFunction = (props) => { 
      return (
        <React.Fragment>
          <div className="box-style">
            <Input value={  props.inputValue } onChange={  props.handleChange } className="input-style" />
            <Button type="primary" onClick={  props.handleAdd }>增加</Button>
          </div>
          <div className="box-style list-style">
            <List bordered dataSource={  props.list } renderItem={ (item: string, index: number) => (<List.Item onClick={  () => props.handleDelete(index) }>{  item }</List.Item>)} />
          </div>
        </React.Fragment>
      );
    };
    
    export default TodoListFunction;

/* todolist.css */
    .box-style { 
      margin: 20px;
    }
    .input-style { 
      margin-right: 10px;
      width: 250px;
    }
    .list-style { 
      width: 300px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304111450293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70