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;
网友评论