reactthunk-demo使用示例初步使用

其实我什么都不懂，但是我什么都想知道，至少知道怎么使用也是棒棒的吧！

今天在一家环境很好的咖啡厅开始我的react学习，这篇文章的目的就是为了让和我一样刚开始接触react-thunk的前端小菜鸟看的哈，主要就是运作一下react-thunk的使用。

我们知道，react中涉及到异步操作，那react-thunk就是为了我们在dispatch(action)的过程中，action是异步的解决办法出现的，当然，还有别的中间件哟，本处就不涉及了。

题目： 当我们输入input,点击提交按钮的时候，延迟一秒将我们的输入显示在UI层

解决：

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

index.js:

   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));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代码已经完整献上，道行深浅就看自己了。加油呀！