使用 redux & react-redux 对todolist进行优化

redux优化todolist

1.在src目录下新建store/index.js和store/reducer.js

reducer.js:
把App.js里面的值提取到reducer.js里面来

let defaultState = {
  title:"待办事项",
  value:'',
  btnText:'ADD',
  arr:[
    {
      "id": 1594449605029,
      "title": "this",
      "isCompleted": false
    },
    {
      "id": 1594449605220,
      "title": "this",
      "isCompleted": false
    }
  ]
}

export default (state = defaultState , action)=>{
  return state
}

index.js:

import { createStore } from 'redux'

import reducer from './reducer' 

export default createStore(reducer)

2.在index.js导入Provider和store：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as Api from './api/index'
import { Provider } from 'react-redux'
import store from './store'


React.Component.prototype.$http = Api

ReactDOM.render(
  <Provider store = {store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3.在App.js里面使用react-redux：

修改前：App.js

import React, { Component } from 'react'
import TodoHeader from './components/header/toheader.jsx'
import TodoInput from './components/todoinput.jsx'
import TodoList from './components/todolist/todolist.jsx'
export default class App extends Component {
  constructor(){
    super()
    this.state = {
      title:"待办事项",
      value:'',
      btnText:'ADD',
      arr:[]
    }
  }
  // 生命周期，页面重新加载数据
  componentDidMount(){
    this.getTodos()
  }
  getTodos(){
    this.$http.getTodos().then(res=>{
      this.setState({
        arr:res.data
      })
    })
  }
  render() {
    const {title,value,btnText} = this.state
    // console.log(arr)
    return (
      <div>
        <TodoHeader title={title}></TodoHeader>
        <TodoInput value = {value} btnText = {btnText} addItem={this.addItem}></TodoInput>
        {
          this.state.arr.length === 0 ?
          <p>暂无数据</p> : 
          this.state.arr.map(todo=>{
            return <TodoList {...todo} handleDelTodo = {this.handleDelTodo} key={todo.id} hanleCompleted ={this.hanleCompleted}></TodoList>
          })
        }
      </div>
    )
  }
  /**
   * @作用: 添加TODO
   * @参数: params 要添加的数据
   * @返回值: response
   * @需要注意: 
   */
  addItem = async (result)=>{
    // console.log(res)
    let obj = {
      id : new Date().getTime(),
      title:result,
      isCompleted:false 
    }
    await this.$http.addTodo(obj)
    // 重新获取一次数据
    this.getTodos()
  }
/**
 * @作用: 删除TODO
 * @参数: id  - 必传
 * @返回值: 
 * @需要注意: 
 */  
  handleDelTodo = (id) => {
    // console.log(id)

    this.$http.delTodo(id)
    // 重新获取一次数据
    this.getTodos()
  }
  /**
   * @作用: 改变input框的选中状态
   * @参数: id ---> 必传
   * @返回值: 
   * @需要注意: 
   */
  hanleCompleted = (id)=>{
    // console.log(id)
    this.setState({
      arr:this.state.arr.map(todo=>{
        if(todo.id===id) todo.isCompleted = !todo.isCompleted
        return todo
      })
    })
  }
}