Input体验redux流程

2022-06-19 03:02:48 阅读：175 来源： 互联网

标签：storeChange 流程 reducer state import action Input redux store

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Input体验redux流程