react-thunk demo使用示例（初步使用）_React

上一篇: 文章收藏夹下一篇:React-Native Fetch方法发送网络...

react-thunk demo使用示例（初步使用）

发布时间：2019-06-25 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了react-thunk demo使用示例（初步使用），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

其实我什么都不懂，但是我什么都想知道，至少知道怎么使用也是棒棒的吧！
今天在一家环境很好的咖啡厅开始我的react学习，这篇文章的目的就是为了让和我一样刚开始接触react-thunk的前端小菜鸟看的哈，主要就是运作一下react-thunk的使用。
我们知道，react中涉及到异步操作，那react-thunk就是为了我们在dispatch(action)的过程中，action是异步的解决办法出现的，当然，还有别的中间件哟，本处就不涉及了。
题目： 当我们输入input,点击提交按钮的时候，延迟一秒将我们的输入显示在UI层
解决：

      
      
      
      
      
  
 基于react框架，我们先写出UI:
index.js:

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" 
  handleinputChange(e){
    this.setState({
      inputValue:e.target.value,
    })
  }

  handleInputSubmIT(e){
   // const value = e.target.value;
    this.PRops.todo(this.state.inputValue);
    this.setState({
      inputValue:'',
    })
  }
     
 render(){
   return (
          
      提交
      
         {this.props.toDOS.map((item,index)=>{return {item}})}
       
   )
 }
 
 const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    ** todo:(text)=>{dispatch(addTodo(text))}, **
  }
}

const mapStateToProps = (state) => {
  return {
    todos:state.todos
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)
 " title="" data-original-title="复制">
      
      
 
  handleInputChange(e){
    this.setState({
      inputValue:e.target.value,
    })
  }

  handleInputSubmit(e){
   // const value = e.target.value;
    this.props.todo(this.state.inputValue);
    this.setState({
      inputValue:'',
    })
  }
     
 render(){
   return (
          <input onChange={this.handleInputChange.bind(this)} value={this.state.inputValue} />
      <div classname='button' onClick={this.handleInputSubmit.bind(this)}>提交</div>
      <div style={{background:'',color:'black',fontSize:'20px',textAlign:'left'}}>
         {this.props.todos.map((item,index)=>{return <div key={index}>{item}</div>})}
      </div> 
   )
 }
 
 const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    ** todo:(text)=>{dispatch(addTodo(text))}, **
  }
}

const mapStateToProps = (state) => {
  return {
    todos:state.todos
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)
 
Store.js

      
      
      
      
      
import { createstore , applyMiddleware } From 'redux' ;
import reducer from '../reducer';
import ReduxThunk from 'redux-thunk';

let store = createStore(reducer,applyMiddleware(ReduxThunk));
@H_560_126@console.LOG('store.getState()=',store.getState())
export default store;      

action.js

      
      
      
      
      
export default function addTodo(text) {
  return dispatch=>{
    console.log('dispatch=',dispatch)
    setTimeout(
      ()=>{
        dispatch({ type: ADD_TODO, text })
      },2000) 
   }
}       
  
  
reduce.js

      
      
      
      
      
  export default function todos(state = [], action) {
    switch (action.type) {
      case 'ADD_TODO':
        return state.concat([action.text])
      default:
        return state
    }
  } 
  
以上代码是完整流程代码，供大家参考，实现一个简单的react-thunk过程。
参考action.js ,react-thunk 主要为我们异步处理过程中传递了一个dispatch,方便我们在异步过程中dispatch一个对象。
UI图如下：

总结：
   demo代码已经完整献上，道行深浅就看自己了。加油呀！