React redux配置使用react-redux redux-thunk 实现todolist (二)-蒲公英云

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

使用 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;
}