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 避免报错 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'>增加</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) } } export default TodoList;
reducer.js
//reduxer暴露的是一个方法 const defaultState={ inputValue:"write Something", List:[ '早八点开晨会,分配今天的代码任务', '早九点和项目经理开需求沟通会1', '早九点和项目经理开需求沟通会1', ] } export default(state=defaultState,action)=>{ console.log(action) //Reducer里只能接收state,不能改变state if(action.type==='changeInput'){ let newState=JSON.parse(JSON.stringify(state))//深拷贝 newState.inputValue=action.value 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注入
//第二个参数配置浏览器Redux DevTools
export default store
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/268324.html