摘要:我们知道,中涉及到异步操作,那就是为了我们在的过程中,是异步的解决办法出现的,当然,还有别的中间件哟,本处就不涉及了。参考主要为我们异步处理过程中传递了一个方便我们在异步过程中一个对象。
其实我什么都不懂,但是我什么都想知道,至少知道怎么使用也是棒棒的吧!
今天在一家环境很好的咖啡厅开始我的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) } const mapDispatchToProps = (dispatch, ownProps) => { return { ** todo:(text)=>{dispatch(addTodo(text))}, ** } } const mapStateToProps = (state) => { return { todos:state.todos } } export default connect( mapStateToProps, mapDispatchToProps )(App){item}})}
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代码已经完整献上,道行深浅就看自己了。加油呀!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104029.html
摘要:使用实现接口的方式实现多线程程序创建接口的实现类对象创建类对象构造方法中传递接口的实现类调用方法开启新线程执行方法简化代码使用匿名内部类实现多线程程序新线程创建了简化代码新线程创建了创建接口的实现类重写方法设置线程任务新线程创建了表达式的标 package com.itheima.demo03.Lambda;/* 使用实现Runnable接口的方式实现多线程程序 */public cl...
摘要:提交内容可以是一个提议想法初步描述该阶段是对所提交新特性的正式建议。在这个阶段需具备以下条件指定一名成员作为审阅通过有实现的或者初步编写标准,包括问题描述解决方案示例语法语义关键的算法及抽象实现在的复杂度等该阶段是会出现标准中的第一个版本。 ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范,内部编号 ECMA-262 该规范由 Ecma(Eu...
阅读 981·2021-09-29 09:35
阅读 4562·2021-09-22 15:24
阅读 1427·2021-07-25 21:37
阅读 2140·2019-08-30 14:17
阅读 890·2019-08-30 13:56
阅读 2320·2019-08-29 17:07
阅读 1103·2019-08-29 12:44
阅读 2686·2019-08-26 18:26