Develop Reference

How can i stop redux action? when i get error

If an error occurs in the yield call(refresh) of the getPost function, the GETPOST_REQUEST action continues regardless of whether an error has occurred.
However, if an error occurs in the getPost function I don’t want the action to run anymore and stop and end like
yield put({
type: REFRESH_FAILURE,
error: err.response.data,
});
this is my code how can i fix?
function getPostAPI(data) {
return axiosInstace.post("/kakao/getpost", data);
}
function* getPost(action) {
try {
const result = yield call(getPostAPI, action.data);
yield put({
type: GETPOST_SUCCESS,
data: result.data,
});
} catch (err) {
if (err.response.data === "jwtEx") {
yield call(refresh); // if this error i want to stop .
yield put(action);
} else {
yield put({
type: GETPOST_FAILURE,
error: err.response.data,
});
}
}
}
function refreshAPI() {
// console.log('data::', data);
return axiosInstace.post("/kakao/refresh");
}
function* refresh() {
try {
const result = yield call(refreshAPI);
yield AsyncStorage.setItem(
"accesstoken",
`${result.data.accessToken}`,
() => {
// console.log('accesstoken 재발급 저장 완료');
console.log("accesstoken3333333333333333333", result.data.accessToken);
}
);
yield put({
type: REFRESH_SUCCESS,
data: result.data,
});
} catch (err) {
console.log("refresh err.response.data:", err.response.data);
yield put({
type: REFRESH_FAILURE,
error: err.response.data,
});
}
}

You can make a small update to the code by doing the following:
return a boolean value from your refresh generator function.
The boolean would be:
true if refresh was successful
false if refresh failed.
set yield call(refresh); to a const declaration to capture this returned boolean value
if this captured boolean value is false, exit the generator function by returning early
Try the code below.
function getPostAPI(data) {
return axiosInstace.post('/kakao/getpost', data);
}
function* getPost(action) {
try {
const result = yield call(getPostAPI, action.data);
yield put({
type: GETPOST_SUCCESS,
data: result.data,
});
} catch (err) {
if (err.response.data === 'jwtEx') {
const refreshSuccess = yield call(refresh);
if (!refreshSuccess) {
return;
}
yield put(action);
} else {
yield put({
type: GETPOST_FAILURE,
error: err.response.data,
});
}
}
}
function refreshAPI() {
return axiosInstace.post('/kakao/refresh');
}
/**
* #returns {boolean}
* - `true` if refresh is successful
* - `false` if refresh failed
*/
function* refresh() {
let refreshSuccess;
try {
const result = yield call(refreshAPI);
yield AsyncStorage.setItem(
'accesstoken',
`${result.data.accessToken}`,
() => {
// console.log('accesstoken 재발급 저장 완료');
console.log('accesstoken3333333333333333333', result.data.accessToken);
}
);
yield put({
type: REFRESH_SUCCESS,
data: result.data,
});
refreshSuccess = true;
} catch (err) {
console.log('refresh err.response.data:', err.response.data);
yield put({
type: REFRESH_FAILURE,
error: err.response.data,
});
refreshSuccess = false;
} finally {
return refreshSuccess;
}
}

How can i use yield in redux-saga?

After receiving the result value of the refresh function, axiosInstace is executed before saving the accesstoken to AsyncStorage, so the updated token cannot be retrieved in axios.js through AsyncStorage.getItem. i want to save accesstoken first in refresh and get acecesstoken in axios.js and send to axiosInstace
How can I solve this problem?
this is my code
(saga.js)
function getPostAPI(data) {
return axiosInstace.post('/kakao/getpost', data);
}
function* getPost(action) {
try {
const result = yield call(getPostAPI, action.data);
yield put({
type: GETPOST_SUCCESS,
data: result.data,
});
} catch (err) {
if (err.response.data === 'jwtEx') {
yield put({
type: REFRESH_REQUEST,
// data: action.data,
});
yield put({
type: GETPOST_REQUEST,
data: action.data,
});
} else {
yield put({
type: GETPOST_FAILURE,
error: err.response.data,
});
}
}
}
function refreshAPI() {
return axiosInstace.post('/kakao/refresh');
}
function* refresh() {
try {
const result = yield call(refreshAPI);
yield AsyncStorage.setItem(
'accesstoken',
`${result.data.accessToken}`,
() => {
// console.log('accesstoken 재발급 저장 완료');
},
);
yield put({
type: REFRESH_SUCCESS,
data: result.data,
});
} catch (err) {
yield put({
type: REFRESH_FAILURE,
error: err.response.data,
});
}
}
(axios.js)
AxiosInstance.interceptors.request.use(async (cfg) => {
const acecesstoken = await AsyncStorage.getItem('accesstoken');
const refreshtoken = await AsyncStorage.getItem('refreshtoken');
if (acecesstoken) {
cfg.headers.Authorization = `Bearer ${acecesstoken} ${refreshtoken}`;
}
return cfg;
});
export default AxiosInstance;

A simple solution would be to call your refresh() generator directly:
function* getPost(action) {
try {
const result = yield call(getPostAPI, action.data);
yield put({
type: GETPOST_SUCCESS,
data: result.data,
});
} catch (err) {
if (err.response.data === 'jwtEx') {
yield call(refresh);
// you could also redispatch the original action
yield put(action);
} else {
yield put({
type: GETPOST_FAILURE,
error: err.response.data,
});
}
}
}
Alternatively your can start a race between REFRESH_SUCCESS and REFRESH_FAILURE:
const { success, failure } = yield race({
success: take('REFRESH_SUCCESS'),
failure: take('REFRESH_FAILURE'),
});
if(success) {
// continue
} else {
// handle refresh failure
}

How can I handle multiple dependent requests in a saga?

I'm trying to make two request, one to save an image an other to save a product with the url from obtained from the first requests
This is what I want to do
first: save product image (I'm using axios for requests)
second: get the url from 'productImage' and then include it in the params to save
this is my code
function* createProduct(action) {
const { endpoint, params } = action.payload;
try {
const productImage = yield call(new api().createImage, { endpoint, params });
// I need to wait the url of the image and include it on the params for the second request before is executed
// E.g. params.image = productImage.url
const product = yield call(new api().createProduct, { endpoint, params });
yield put({
type: CREATE_PRODUCT_SUCCEED,
payload: {
product
}
});
} catch (e) {
yield put({
type: CREATE_PRODUCT_FAILED,
payload: {
...e
}
});
}
}
export default function* createProductWatcher() {
yield takeEvery(CREATE_PRODUCT_EXECUTION, createProduct);
}

The best pattern here is to split your saga (createProduct) into two separate sagas:
createImage - will handle the image creation for the product
createProduct - will handle the product creation with the given image
// Creates the product image
function* createImage(action) {
const { endpoint, params } = action.payload;
try {
const image = yield call(new api().createImage, { endpoint, params });
yield put({
type: CREATE_IMAGE_SUCCEED,
// Here you pass the modified payload to createProduct saga
payload: {
endpoint,
params: { image: image.url }
}
});
} catch(e) {
yield put({
type: CREATE_IMAGE_FAILED,
payload: {
...e
}
});
}
}
//Creates the product with the image
function* createProduct(action) {
const { endpoint, params } = action.payload;
try {
const product = yield call(new api().createImage, { endpoint, params });
yield put({
type: CREATE_PRODUCT_SUCCEED,
payload: {
product
}
});
} catch(e) {
yield put({
type: CREATE_PRODUCT_FAILED,
payload: {
...e
}
});
}
}
Then use the builtin yield* operator to compose multiple Sagas in a sequential way.
// Another saga for chaining the results
function* invokeSagasInOrder(sagas) {
try {
const image = yield* createImage();
yield* createProduct(image);
} catch(e) {
console.log(e);
}
}
Welcome to stackoverflow!

Return data from fetch in Saga to Redux tree

export function* onFetchTree() {
yield takeLatest('FETCH_TREE', function* () {
try {
const response = yield call(fetch, '/myApi/user', {
method: 'GET',
headers: {
accept: 'application/json'
}
})
const responseBody = response.json();
yield put({ type: 'SET_TREE', payload: responseBody });
} catch (e) {
// yield put(fetchFailed(e));
return;
}
});
}
Learning to work with sagas, stuck on getting the actual data into my redux store. The above code which sends responseBody to the payload gives me a Promise object (because .json() returns that) which is great, except that I can't access the resolved Promise. I ended up on What does [[PromiseValue]] mean in javascript console and how to do I get it but this doesn't seem to work for me. I've tried adding .then() in a few ways, no luck. It seems to prevent the generator function from running at all.
If I just use response I get a Response object, which doesn't have the payload. What am I missing here? How do I get the right payload?

You need to wait for the server to send back the response.
export async function* onFetchTree() {
yield takeLatest('FETCH_TREE', function* () {
try {
const response = yield call(fetch, '/myApi/user', {
method: 'GET',
headers: {
accept: 'application/json'
}
})
const responseBody = await response.json()
yield put({ type: 'SET_TREE', payload: responseBody )}
};
} catch (e) {
// yield put(fetchFailed(e));
return;
}
});
}

I followed a pattern I found on this page that ended up working for me. I don't fully understand why the fetchTree helper is needed, but it doesn't work without it.
https://www.sigient.com/blog/managing-side-effects-with-redux-saga-a-primer-1
function fetchJson(url) {
return fetch(url, {
method: 'GET',
headers: {
accept: 'application/json'
}
})
.then(response => {
if (!response.ok) {
const error = new Error(response.statusText);
error.response = response;
throw error;
}
return response.json();
});
}
function fetchTree() {
return fetchJson('/myApi/user');
}
export function* onFetchTree() {
try {
const tree = yield call(fetchTree);
yield put({ type: 'SET_TREE', payload: tree });
} catch (e) {
yield put({
type: 'ERROR',
payload: e,
error: true,
});
}
}

Redux-Saga yield call returning back as undefined

Given the following code, I am getting an undefined result back from my yield call. Why is this happening? I am thinking its something with my request function. Not sure why.
In my saga file, this line is coming back undefined:
const result = yield call(request, Routes.insightTotals);
I have verified the request is firing off and returning correctly. Could it be my promise chain that is causing this to be undefined?
HTTP Request functions
function request(url, options) {
return fetch(url, options)
.then(parseJSON)
.then(checkStatus);
}
function parseJSON(response) {
if (response.url === 'https://myurl.com') {
// This returns as a GZIP body so need to convert to text then parse as JSON
return response.text()
.then((res) => {
const parsed = JSON.parse(res);
console.log(parsed)
return parsed;
}).catch((err) => {
throw new Error(err);
});
}
return response.json();
}
Saga file
export function* getInsightTotalsRequestHandler() {
yield takeEvery(actions.GET_INSIGHT_TOTALS, function* getInsightTotalsRequest() {
try {
const result = yield call(request, Routes.insightTotals);
console.log(result); // THIS IS UNDEFINED
yield put({
type: actions.GET_INSIGHT_TOTALS_RETURN,
value: { result },
});
} catch (error) {
yield put({
type: actions.GET_INSIGHT_TOTALS_RETURN,
value: { error: error.message ? error.message : '' },
});
}
});
}
export default function* mySaga() {
yield all([
fork(other1RequestHandler),
fork(other2RequestHandler),
fork(getInsightTotalsRequestHandler),
]);
}

Yes, it is. call will return the resolved promise value. My best guess is that checkStatus does not return a value (You're not showing it).