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