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