React手稿之 React-Saga的详解
Redux-Saga
redux-saga是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的javascript库，它的目标是让副作用管理更容易，执行更高效，测试更简单，处理故障更容易。
redux-saga相当于一个放置在action与reducer中的垫片。
之所以称之谓副作用呢，就是为了不让触发一个action时，立即执行reducer。也就是在action与reducer之间做一个事情，比如异步获取数据等。
redux-saga使用了ES6中的Generator功能，避免了像redux-thunk的回调地狱。
如何使用
安装
$npminstall--saveredux-saga //或者 $yarnaddredux-saga
示例
假设有一个UI界面，是根据用户ID显示用户详情的。那么我们需要通过接口从数据库根据userId来获取数据。
简单起见，我们在本地使用一个json文件来模拟数据库数据。
{
"297ee83e-4d15-4eb7-8106-e1e5e212933c":{
"username":"Saga"
}
}
创建UIComponent
importReactfrom'react';
import{USER_FETCH_REQUESTED}from'../../../actions/User';
exportdefaultclassextendsReact.Component{
constructor(props){
super(props);
this.state={userId:'297ee83e-4d15-4eb7-8106-e1e5e212933c'}
}
render(){
const{userInfo={},dispatch}=this.props;
return(
{
dispatch({type:USER_FETCH_REQUESTED,payload:{userId:this.state.userId}});
}}>GetUserInfo用户名：{userInfo.username}
);
}
}
创建saga，这里的saga就相当于action.
import{call,put,takeEvery}from'redux-saga/effects'
import{fetchUserApi}from'../api/user';
import{USER_FETCH_REQUESTED,USER_FETCH_SUCCEEDED,USER_FETCH_FAILED}from'../actions/User';
function*fetchUser({payload}){
try{
constuser=yieldcall(fetchUserApi,payload.userId);
yieldput({type:USER_FETCH_SUCCEEDED,user});
}catch(e){
yieldput({type:USER_FETCH_FAILED,message:e.message});
}
}
constuserSaga=function*(){
yieldtakeEvery(USER_FETCH_REQUESTED,fetchUser);
}
exportdefaultuserSaga;
关于fetchUserApi,我们会在后面的章节中描述。这里仅获取了json文件中与userId相对应的数据。
把saga放入store中:
importcreateSagaMiddlewarefrom'redux-saga'; importSagasfrom'../sagas/index'; constsagaMiddleware=createSagaMiddleware() conststore=createStore( reducer, applyMiddleware(sagaMiddleware) ) sagaMiddleware.run(Sagas)
最后再实现相就的reducer即可：
import{USER_FETCH_SUCCEEDED}from'../actions/User';
constinitialState={user:{}};
exportdefault(state=initialState,action)=>{
switch(action.type){
caseUSER_FETCH_SUCCEEDED:
return{...state,user:action.user};
default:
returnstate;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。