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

Benedict Evans 发布于2019-08-23 17:14 / 815人阅读

摘要：我们知道，中涉及到异步操作，那就是为了我们在的过程中，是异步的解决办法出现的，当然，还有别的中间件哟，本处就不涉及了。参考主要为我们异步处理过程中传递了一个方便我们在异步过程中一个对象。

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

今天在一家环境很好的咖啡厅开始我的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 (
          
      提交
      
         {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)

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

云服务器 GPU云服务器使用示例 webrtc demo使用方法 webrtc带宽检测demo使用案例云服务器ecs linux下使用ntfs文件系统示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104029.html

redux入门事例

摘要：中定义来各个要做的事情。代码定义把封装成一个方法，这样用的时候不用每次定义，避免出错入口文件封装成方法，方便下面的的订阅调用每当时，订阅的函数就会执行现在有机关枪把。通过的来触发，中订阅的事件就会执行。触发，获取的值。环境准备为了方便，这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置如果需要自定义react的配置...

cheng10 2019-08-22 16:28 评论0 收藏0
lambda初步了解的代码，与传统方式的比较

摘要：使用实现接口的方式实现多线程程序创建接口的实现类对象创建类对象构造方法中传递接口的实现类调用方法开启新线程执行方法简化代码使用匿名内部类实现多线程程序新线程创建了简化代码新线程创建了创建接口的实现类重写方法设置线程任务新线程创建了表达式的标 package com.itheima.demo03.Lambda;/* 使用实现Runnable接口的方式实现多线程程序 */public cl...

Gilbertat 2019-08-19 10:25 评论0 收藏0
前端背景知识查漏补缺

摘要：提交内容可以是一个提议想法初步描述该阶段是对所提交新特性的正式建议。在这个阶段需具备以下条件指定一名成员作为审阅通过有实现的或者初步编写标准，包括问题描述解决方案示例语法语义关键的算法及抽象实现在的复杂度等该阶段是会出现标准中的第一个版本。 ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范，内部编号 ECMA-262 该规范由 Ecma(Eu...

developerworks 2019-08-22 15:53 评论0 收藏0