使用 redux-saga 进行异步 api 调用
Asynchronous api calls with redux-saga
我正在关注 redux-saga documentation 助手,到目前为止它看起来很简单,但是在执行 api 调用时我偶然发现了一个问题(正如您将看到的 link 文档指向这样的例子)
有一部分 Api.fetchUser
没有解释,所以我不太明白这是否是我们需要用像 axios or superagent 这样的库来处理的东西?或者是别的东西。 call, put
等 saga 效应是否等同于 get, post
?如果是这样,他们为什么这样命名?本质上,我正在尝试找出一种正确的方法来对 url example.com/sessions
处的 api 执行简单的 post 调用,并向其传递数据,例如 { email: 'email', password: 'password' }
Api.fetchUser
是一个函数,应该在哪里执行 api ajax 调用并且它应该 return 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);
};
然后是sagas:
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
function creates effect,指示中间件向 store 发送一个动作。
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
是一个 class,它实现了 login
方法,该方法处理对 API 的 HTTP 请求。 redux-saga call
将调用此方法并将数据参数应用于它。在上面的代码片段中,我们可以评估调用的结果并使用 put
.
相应地调度 loginSuccess
或 loginError
操作
旁注:上面的代码片段是一个持续侦听 USER_LOGIN
事件的 loginSaga,但会在 LOCATION_CHANGE
发生时中断。这要感谢 race
特效制作者。
我正在关注 redux-saga documentation 助手,到目前为止它看起来很简单,但是在执行 api 调用时我偶然发现了一个问题(正如您将看到的 link 文档指向这样的例子)
有一部分 Api.fetchUser
没有解释,所以我不太明白这是否是我们需要用像 axios or superagent 这样的库来处理的东西?或者是别的东西。 call, put
等 saga 效应是否等同于 get, post
?如果是这样,他们为什么这样命名?本质上,我正在尝试找出一种正确的方法来对 url example.com/sessions
处的 api 执行简单的 post 调用,并向其传递数据,例如 { email: 'email', password: 'password' }
Api.fetchUser
是一个函数,应该在哪里执行 api ajax 调用并且它应该 return 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);
};
然后是sagas:
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
function creates effect,指示中间件向 store 发送一个动作。
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
是一个 class,它实现了 login
方法,该方法处理对 API 的 HTTP 请求。 redux-saga call
将调用此方法并将数据参数应用于它。在上面的代码片段中,我们可以评估调用的结果并使用 put
.
loginSuccess
或 loginError
操作
旁注:上面的代码片段是一个持续侦听 USER_LOGIN
事件的 loginSaga,但会在 LOCATION_CHANGE
发生时中断。这要感谢 race
特效制作者。