react--redux+antd实现todoList

• 学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353

安装

• yarn add antd
• yarn add redux

调度流程图

解释

先看组件，组件不直接更新，需要传递给调度员一个action，这个action中包含自己想干的事。比如，数据添加，删除。调度员只作调度这一件事，将组件传递过来的action直接给store就算完成任务。store并不会直接做什么，而是将action和自身的state一同传递给reducer，具体干什莫，reducer决定。事件处理完成后，reducer将新的状态传递给store，于此同时，store再将新的数据转递给组件，使得组件完成更新，数据发生改变。

目录结构

• 重点是store文件夹下内容和App.js

App.js

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store/index'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    store.subscribe(this.handleStoreChange)
  }

  handleChange = (e) => {
    const action = {
      type: "change_input_value",
      value: e.target.value
    }
    store.dispatch(action)
  }
  handleStoreChange = () => {
    this.setState(
      store.getState()
    )
  }
  handleAdd = () => {
    const action={
      type:"add_todo_item"
    }
    store.dispatch(action);
  }
  onKeyup=(e)=> {
    if(e.keyCode === 13) {
        this.handleAdd();
    }
}
  handleDelete=(index)=>{
    const action={
      type:"del_todo_item",
      index
    }
    store.dispatch(action);
  }
  render() {
    return (

      <div style={{ margin: "10px 0 0 10px" }}>
        <Input onKeyUp={this.onKeyup} value={this.state.inputValue} onChange={this.handleChange} placeholder="todo info" style={{ width: "300px", marginRight: "10px" }} />
        <Button type="primary" onClick={this.handleAdd}>提交</Button>
        <List
          style={{ marginTop: "10px", width: "300px" }}
          bordered
          dataSource={this.state.list}
          renderItem={(item,i) => (
            <List.Item onClick={this.handleDelete.bind(this,i)}>
              {item}
            </List.Item>
          )}
        />
      </div>

    )
  }
}

export default App;

store/index.js

import {createStore} from 'redux'
import reducer from './reducer'

const store=createStore(
    reducer,
    //redux devtools调试用
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

store/reducer.js

const defaultState = {
    inputValue: "",
    list: []
};
export default (state = defaultState, action) => {
    if (action.type === "change_input_value") {
        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 === "del_todo_item") {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1);
        return newState;
    }

    return state;

}

效果图

• 支持回车添加
• 点击某一项删除