redux saga的基本使用

2022-07-07 16:36:12 字數 1980 閱讀 7534

yarn add redux-saga

mysaga.js  定義saga檔案

import  from 'redux-saga/effects'

//模擬登陸介面

const userservice =)

} else

) }

}, 1000)})}

}function*loginhandle(action) ) //

put和dispatch類似,執行reducer

} catch

(error) )

}}function*mysaga()

export

default mysaga

store.js  儲存公共狀態檔案

引入createsagamiddleware

import mysaga from '../mysage'const initallogin =

const sagamiddleware = createsagamiddleware() //

建立中介軟體

function loginreducer(state =, action)

case 'requestsuccess':

return

case 'requestfailure':

return

default

:

return

state

}}const store =createstore(

combinereducers(),

//)sagamiddleware.run(mysaga)

//此處必須執行run()

export default store

loginpage.js 具體呼叫頁面

import react,  from 'react';

import from 'react-router-dom'import from "react-redux";

class loginpage extends component

}changename = (event) =>)

}render() = this

.props

console.log('loginpage', this

.props)

const = this

.state

if(islogin) = location.state ||{}

return

}

return

(

this.changename}/>

login(name)}>

) //有錯誤資訊則顯示

}); }

}const mapstatetoprops = state =>

}const mapdispatchtoprops =

//},

//loginsuccess: () => dispatch => )

//settimeout(() => )

//}, 2000)

//},

login : (name) => )

}}export

default connect(mapstatetoprops, mapdispatchtoprops)(loginpage)

以下是資料傳遞方式

對redux saga的研究

中介軟體用過redux thunk,也用過redux promise middleware,原理都很簡單。thunk就是簡單的action作為函式,在action進行非同步操作,發出新的action。而promise只是在action中的payload作為乙個promise,中介軟體內部進行處理之後...

gulp的使用基本使用

1.全域性安裝gulp 目的是在命令列裡使用gulp的命令 2.命令列中cd到專案目錄,區域性安裝gulp 如果不在專案中再次安裝會報錯,據說這樣是為了避免發生版本衝突 3.在專案目錄下新建乙個gulpfile.js檔案 必須這個名字,這個檔案算是乙個配置檔案 編寫我們的需求,以便gulp能按著我們...

Ocelot的使用 基本使用

ocelot是在.net core下閘道器的實現類庫,通過ocelot可以統一管理我們的webapi,不用再 中調來調去的很多api位址,統一從閘道器呼叫就行了。記錄下如何簡單的使用ocelot 1.新建gateway的閘道器專案,以及webapi的示例專案service1和service2 在ga...