資訊專欄INFORMATION COLUMN
摘要：我們知道，中涉及到異步操作，那就是為了我們在的過程中，是異步的解決辦法出現的，當然，還有別的中間件喲，本處就不涉及了。參考主要為我們異步處理過程中傳遞了一個方便我們在異步過程中一個對象。
其實我什么都不懂，但是我什么都想知道，至少知道怎么使用也是棒棒的吧！
今天在一家環境很好的咖啡廳開始我的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代碼已經完整獻上，道行深淺就看自己了。加油呀！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104029.html
摘要：使用實現接口的方式實現多線程程序創建接口的實現類對象創建類對象構造方法中傳遞接口的實現類調用方法開啟新線程執行方法簡化代碼使用匿名內部類實現多線程程序新線程創建了簡化代碼新線程創建了創建接口的實現類重寫方法設置線程任務新線程創建了表達式的標 package com.itheima.demo03.Lambda;/* 使用實現Runnable接口的方式實現多線程程序 */public cl...
摘要：提交內容可以是一個提議想法初步描述該階段是對所提交新特性的正式建議。在這個階段需具備以下條件指定一名成員作為審閱通過有實現的或者初步編寫標準，包括問題描述解決方案示例語法語義關鍵的算法及抽象實現在的復雜度等該階段是會出現標準中的第一個版本。 ECMAScript 與 JavaScript ECMAScript 是一套腳本語言的規范，內部編號 ECMA-262 該規范由 Ecma(Eu...
閱讀 1075·2021-09-29 09:35
閱讀 4621·2021-09-22 15:24
閱讀 1449·2021-07-25 21:37
閱讀 2178·2019-08-30 14:17
閱讀 965·2019-08-30 13:56
閱讀 2411·2019-08-29 17:07
閱讀 1251·2019-08-29 12:44
閱讀 2705·2019-08-26 18:26
