redux制作TodoList列表

 

 TodoList.js

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

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)
    store.subscribe(this.storeChange)//订阅
  }
    render() { 
        return (  
            
            <div style={{margin:'10px'}}>
                <div><Input 
            placeholder={this.state.inputValue}
            style={{width:'250px',marginRight:'10px'}}
            onChange={this.changeInputValue}
            value={this.state.inputValue}
            />
            <Button type='primary'
                onClick={this.clickBtn}
            >增加</Button>
            </div>
            <div style={{margin:'10px',width:'300px'}}>
                <List 
                bordered 
                dataSource={this.state.List}
                renderItem={item=>(<List.Item>{item}</List.Item>)}/>
            </div>
            </div>
        );
    }
    changeInputValue(e){
        //e：改变的值都可以监听到
         //console.log(e.target.value)
         const action={
            type:'changeInput',
            value:e.target.value
         }
         store.dispatch(action)
    }
    storeChange(){
        this.setState(store.getState())
    }
    clickBtn(){
        const action ={type:'addItem'}
        store.dispatch(action)
    }
}

 
export default TodoList;
  

store/reducer.js

//reduxer暴露的是一个方法
const defaultState={
    inputValue:"write Something",
    List:[
    '早八点开晨会，分配今天的代码任务',
    '早九点和项目经理开需求沟通会1',
    '早九点和项目经理开需求沟通会1',
]
}

//state初始值设为defaultState,如果store已有state，则不再使用初始值（内部函数深拷贝的state为store里的state）
export default(state=defaultState,action)=>{
    console.log(action)
    //Reducer里只能接收state，不能改变state
    if(action.type==='changeInput'){
        let newState=JSON.parse(JSON.stringify(state))//深拷贝  这里拷贝的是store里的state
        newState.inputValue=action.value
        return newState
    }if(action.type==='addItem'){
        let newState=JSON.parse(JSON.stringify(state))//深拷贝
        newState.List.push(newState.inputValue) //change改变的
        newState.inputValue='' //增加后置空
        return newState
    }
    return state
}

store/index.js

import {createStore} from 'redux'
import reducer from "./reducer";
const store =createStore(reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );//reducer注入
export default store