超级详细react笔记(十三)项目篇(待办事项)redux

1 下载依赖

cnpm i redux react-redux react-thunk -S

2 编写

• 1 创建store/index.js引入redux 引入监听 暴露函数
• 2 reducer.js 默认参数 暴露函数
• 3 将组件抽离要共享数据的组件 react-redux producer connect
• 4 reducer.js 类型 进行业务操作

2.1

• APP.js

import React,{Component} from 'react'
import {TodoHead,TodoInput,TodoList} from './component'
import {connect} from 'react-redux'
class APP extends Component{
    constructor() {
        super();
        this.state={
        }
    }
    render() {
        return(
            <div>
                <TodoHead {...this.props}/>
                <TodoInput {...this.props} myadd={this.props.addItem}/>
                <TodoList {...this.props} changeBox={this.props.changeBox} />
            </div>
        )
    }
}
const mapState = state => state
const  mapAction = dispatch=>{
    return{
        addItem(title){
            dispatch({
                type:'ADD_ITEM',
                title
            })
        },
        changeBox(id){
            dispatch({
                type:"CHECK_BOX",
                id
            })
        }
    }
}
export default connect(mapState,mapAction)(APP)

• reducer.js

const defaultProps = {
    title:'待办事项',
    input:'请输入添加内容',
    btnText:'添加',
    columns: [
        {
            label: "id",
            prop: "id",
            width: 180
        },
        {
            label: "名称",
            prop: "title",
            width: 180
        },
        {
            label: "状态",
            prop: "status"
        }
    ],
    todos:[
        {
            id:1,
            title:"吃饭",
            status:false
        },
        {
            id:2,
            title:"睡觉",
            status:true
        },
        {
            id:3,
            title:"打豆豆",
            status:false
        }
    ]
}
export default (state=defaultProps,action)=>{
    switch (action.type) {
        case 'ADD_ITEM':
            let newAdd = JSON.parse(JSON.stringify(state))
            newAdd.todos.push({
                id:new Date().getTime(),
                title:action.title,
                status:false
            })
            return newAdd
        case 'CHECK_BOX':
            let newSub = JSON.parse(JSON.stringify(state))
           newSub.todos.map(el=>{
               if(el.id===action.id){
                   el.status=!el.status
               }
               return el
           })
            return newSub
        default:
            return state
    }
}

• store.js

import {createStore} from 'redux'

import Reducer from './reducer'
export default createStore(Reducer)

4 拆分组件化+axios

• actions

import {ADD_ITEM,CHECK_BOX,GET_TODO} from '../types'
import axios from '../../API'
export const addItem = (title)=>{
    return{
        type:ADD_ITEM,
        title
    }
}

export const changeBox = (id)=>{
    return{
        type:CHECK_BOX,
        id
    }
}
export const getTodosAction =()=>{
    return{
        type:GET_TODO
    }
}
export const getTodos = () => async dispatch=>{
  const res = await axios.get('/todos')
    dispatch(getTodosAction(res.data))
    console.log(res)
}

• reducer.js

import {ADD_ITEM, CHECK_BOX, GET_TODO} from '../types'
const defaultProps = {
    title:'待办事项',
    input:'请输入添加内容',
    btnText:'添加',
    columns: [
        {
            label: "id",
            prop: "id",
            width: 180
        },
        {
            label: "名称",
            prop: "title",
            width: 180
        },
        {
            label: "状态",
            prop: "status"
        }
    ],
    todos:[
        {
            id:1,
            title:"吃饭",
            status:false
        },
        {
            id:2,
            title:"睡觉",
            status:true
        },
        {
            id:3,
            title:"打豆豆",
            status:false
        }
    ]
}
export default (state=defaultProps,action)=>{
    switch (action.type) {
        case ADD_ITEM:
            let newAdd = JSON.parse(JSON.stringify(state))
            newAdd.todos.push({
                id:new Date().getTime(),
                title:action.title,
                status:false
            })
            return newAdd
        case CHECK_BOX:
            let newSub = JSON.parse(JSON.stringify(state))
           newSub.todos.map(el=>{
               if(el.id===action.id){
                   el.status=!el.status
               }
               return el
           })
            return newSub
        case GET_TODO:
            let newData = JSON.parse(JSON.stringify(state))
            console.log(newData)
            return newData
        default:
            return state
    }
}

• APP.js

import React,{Component} from 'react'
import {TodoHead,TodoInput,TodoList} from './component'
import {connect} from 'react-redux'
import {addItem,changeBox,getTodos} from './store/actions'
class APP extends Component{
    render() {
        return(
            <div>
                <TodoHead {...this.props}/>
                <TodoInput {...this.props} myadd={this.props.addItem}/>
                <TodoList {...this.props} changeBox={this.props.changeBox} />
            </div>
        )
    }
    componentDidMount() {
        this.props.getTodos()
    }
}
const mapState = state => state
const  mapAction = dispatch=>{
    return{
        addItem(title){
            dispatch(addItem(title))
        },
        changeBox(id){
            dispatch(changeBox(id))
        },
       getTodos(){
           dispatch(getTodos())
        }
    }
}
export default connect(mapState,mapAction)(APP)