我关注助手redux-saga documentation,到目前为止看起来很简单,但是在执行api调用时遇到了一个问题(因为你会看到文档的链接指向这样的例子) )
有一部分Api.fetchUser
未解释,因此我不清楚是否需要处理axios或superagent等库?还是那个别的东西。是call, put
之类的传奇效果......等同于get, post
?如果是这样,他们为什么这样命名?从本质上讲,我正在尝试找出一种正确的方法,在网址example.com/sessions
对我的api执行简单的帖子调用,并将其传递给{ email: 'email', password: 'password' }
答案 0 :(得分:42)
Api.fetchUser
是一个函数,应该执行api ajax调用,它应该返回promise。
在您的情况下,此承诺应解析用户数据变量。
例如:
// services/api.js
export function fetchUser(userId) {
// `axios` function returns promise, you can use any ajax lib, which can
// return promise, or wrap in promise ajax call
return axios.get('/api/user/' + userId);
};
然后是传奇:
function* fetchUserSaga(action) {
// `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
// Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
const userData = yield call(api.fetchUser, action.userId);
// Instructing middleware to dispatch corresponding action.
yield put({
type: 'FETCH_USER_SUCCESS',
userData
});
}
call
,put
是效果创建者功能。他们没有熟悉GET
或POST
请求的内容。
call
函数用于创建效果描述,指示中间件调用promise。
put
函数创建效果,指示中间件将操作分派给商店。
答案 1 :(得分:5)
call
,put
,take
,race
之类的内容是效果创建者功能。 Api.fetchUser
是您自己的函数的占位符,用于处理API请求。
以下是loginSaga的完整示例:
export function* loginUserSaga() {
while (true) {
const watcher = yield race({
loginUser: take(USER_LOGIN),
stop: take(LOCATION_CHANGE),
});
if (watcher.stop) break;
const {loginUser} = watcher || {};
const {username, password} = loginUser || {};
const data = {username, password};
const login = yield call(SessionService.login, data);
if (login.err === undefined || login.err === null && login.response) {
yield put(loginSuccess(login.response));
} else {
yield put(loginError({message: 'Invalid credentials. Please try again.'}));
}
}
}
在此代码段中,SessionService
是一个实现login
方法的类,该方法处理对API的HTTP请求。 redux-saga call
将调用此方法并将data参数应用于此方法。在上面的代码段中,我们可以使用loginSuccess
评估调用结果并相应地调度loginError
或put
操作。
旁注:上面的代码段是一个持续监听USER_LOGIN
事件的loginSaga,但在LOCATION_CHANGE
发生时会中断。这要归功于race
效果创建者。