Redux antd => React-Redux

npm i antd

https://ant.design/components/list-cn/

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

const App = (
  <Provider store={store}>
    <TodoList/>
  </Provider>
)

ReactDOM.render(App, document.getElementById('root'));

• TodoList.js
  

<List.Item data-index={index} onClick={handleItemClick}>

import React from 'react'
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'
import store from './store'
import { connect } from 'react-redux';
import {
  getInputChangeAction,
  getTodoAddAction,
  getTodoDeleteAction,
  getTodoList
} from './store/actionCreators'

class TodoList extends React.Component {

  componentDidMount() {
    const action = getTodoList()
    store.dispatch(action)
  }

  render() {
    return (
      <div style={{width: '400px', margin: '20px auto'}}>
        <div>
          <Input value={this.props.inputValue} onChange={this.props.handleInputChange} style={{width: '300px', marginRight: '20px'}}/>
          <Button onClick={this.props.handleBtnClick} style={{width: '80px'}} type='primary' >add</Button>
        </div>
        <List
          style={{marginTop: '20px'}}
          bordered
          dataSource={this.props.list}
          renderItem={(item, index) => <List.Item onClick={this.props.handleItemClick.bind(this, index)}>{item}</List.Item>}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    list: state.list,
    inputValue: state.inputValue
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleBtnClick() {
      const action = getTodoAddAction()
      dispatch(action)
    },
    handleInputChange(e) {
      const action = getInputChangeAction(e.target.value)
      dispatch(action)
    },
    handleItemClick(index) {
      const action = getTodoDeleteAction(index)
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)