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代碼已經完整獻上，道行深淺就看本身了。加油呀！