react+redux UI和主逻辑分离&Action Crea

redux流程图.png

TodoList.js

import React, { Component } from 'react';
import TodoListUI from './TodoListUI'
import store from './store'
import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './store/actionTypes'
import {changeInputAction,clickBtnAction,deleteItemAction,getListAction} from './store/actionCreators'
import axios from 'axios'

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.changeInputValue=this.changeInputValue.bind(this)
        this.storeChange=this.storeChange.bind(this)
        this.clickBtn=this.clickBtn.bind(this)
        this.deleteItem=this.deleteItem.bind(this)
        store.subscribe(this.storeChange)
    }
    render() { 
        return ( 
           <TodoListUI 
           inputValue={this.state.inputValue}
           changeInputValue={this.changeInputValue}
           clickBtn={this.clickBtn}
           list={this.state.list}
           deleteItem={this.deleteItem}
           
           
           />

         );
    }
    componentDidMount(){
        // axios.get('https://www.fastmock.site/mock/dffe9e557e549a34442255ab7356f863/test/api')
        // .then((res)=>this.setState({list:res.data.list})).catch((error)=>{console.log('axios获取数据失败'+error)})
        axios.get('https://www.fastmock.site/mock/dffe9e557e549a34442255ab7356f863/test/api')
        .then((res)=>{
            const action=getListAction(res.data.list)
            store.dispatch(action)

        })
        .catch((error)=>{console.log('axios获取数据失败'+error)})
       
    }

    changeInputValue(e){
        const action=changeInputAction(e.target.value)
        
        store.dispatch(action)
    }
    clickBtn(){
        const action=clickBtnAction()
        store.dispatch(action)
    }
    deleteItem(index){
        const action=deleteItemAction(index)
        store.dispatch(action)
    }
    storeChange(){
        this.setState(store.getState())
    }
}
 
export default TodoList;

/store/actionTyoes.js

export const  CHANGE_INPUT = 'changeInput'
export const  ADD_ITEM = 'addItem'
export const  DELETE_ITEM = 'deleteItem'
export const  GET_LIST = 'getList'

/store/actionCreators.js

import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM,GET_LIST} from './actionTypes'

export const changeInputAction=(value)=>({type:CHANGE_INPUT,value})
export const clickBtnAction=()=>({type:ADD_ITEM})
export const deleteItemAction=(index)=>({type:DELETE_ITEM,index})
export const getListAction=(data)=>({type:GET_LIST,data})

/store/reducer.js

import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM,GET_LIST} from './actionTypes'

const defaultState = {
    inputValue : 'Write Something',
    list:[
        '列表1',
        '列表2'
    ]
}

export default (state=defaultState,action)=>{
    if (action.type === CHANGE_INPUT){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue=action.value
        return newState
    }
    if (action.type === ADD_ITEM){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue=''
        return newState
    }
    if (action.type === DELETE_ITEM){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        newState.inputValue=''
        return newState
    }
    if (action.type === GET_LIST){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list=action.data
        return newState
    }
    return state
}

TodoListUI.js

import React, { Component } from 'react';
import 'antd/dist/antd.css'
import {Input,Button,List} from 'antd'

//无状态组件
const TodoListUI=(props)=>{
    return ( 
        <div style={{margin:'30px'}}>
        <div>
            <Input placeholder={props.inputValue} style={{width:'250px',marginRight:'10px'}}
            onChange={props.changeInputValue} value={props.inputValue}
            />
            <Button type="primary" onClick={props.clickBtn}>add</Button>
        </div>
        <div style={{margin:'10px',width:'300px'}}>
    <List bordered dataSource={props.list} renderItem={(item,index)=>(<List.Item onClick={()=>props.deleteItem(index)}>{item}</List.Item>)} />
        </div>


        </div>

     );
}
export default TodoListUI;