Input体验redux流程

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

 

标签：storeChange,流程,reducer,state,import,action,Input,redux,store
来源： https://www.cnblogs.com/Jarsmine/p/16389817.html