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

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

// views/todolist/TodoList.tsx
import * as React from 'react';
import { connect } from 'react-redux';
import { inputValueAction, addListAction, deleteListAction, getListAction, getTodoListThunkAction, getTodoListSagaAction } 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, getTodoListSagaAction })
export default class TodoList extends React.Component<IProps, IState> {

  // 获取数据
  componentDidMount(): void {
    const { getTodoListSagaAction }: any = this.props;
    getTodoListSagaAction();
  }

  /**
   * 监听 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;
}