如果没有 settimeout，我该怎么做？
How can I do that without settimeout?
当我按下 onLike 按钮时，我想分派加载进程
我想在 LIKE_POST_SUCESS
之后看到 LOAD_POST_SUCCESS
当我按下 onLike 按钮时，我想分派加载进程
我想在 LIKE_POST_SUCESS
之后看到 LOAD_POST_SUCCESS
像这样：
但有时过程不可靠
像这样：
import React, { useEffect, useState,useCallback } from 'react';
import styled from 'styled-components/native';
import {LOAD_POST_REQUEST,LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, INITIAL_REQUEST,COOK_UP_REQUEST} from '../../../reducers/post';
import {useDispatch,useSelector} from 'react-redux';
import {
RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone,
} from '@ant-design/icons';
import IconButton from '../../components/IconButton';
import { ImageBackground } from 'react-native';
const Container = styled.View`
`;
const Hi = styled.Text`
`;
const IconButtonU = styled.Image`
width: 30px;
height: 30px;
`;
const LikeNumber = styled.Text`
`;
const MenuContainer = styled.TouchableOpacity`
width: 30px;
height: 30px;
`;
const Explain = ({navigation,route}) => {
const dispatch = useDispatch();
const {me} = useSelector((state) =>state.user);
const {singlePost} = useSelector((state) => state.post);
const onLike = () => {
return dispatch({
type: LIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const onUnlike = () => {
return dispatch({
type: UNLIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const liked = singlePost?.Likers.find((v) => v.id === me?.id);
return (
<Container>
<Hi>
안녕
</Hi>
{ liked
?
<MenuContainer onPress={onUnlike} >
<IconButtonU iconName="favorite"
style={{width:23, height:23}}
source={require('../../Assets/Images/Tabs/heart.png')}
/>
</MenuContainer>
:
<MenuContainer onPress={onLike} >
<IconButtonU iconName="favorite"
source={require('../../Assets/Images/Tabs/ic_favorite_outline.png')}
/>
</MenuContainer>
}
<LikeNumber>
좋아요{' '}
{singlePost?.Likers.length }
</LikeNumber>
</Container>
);
};
export default Explain;
(saga/post.js)
import axios from 'axios';
import { all, fork, put, takeLatest, throttle, call } from 'redux-saga/effects';
import {
ADD_POST_FAILURE,
ADD_POST_REQUEST,
ADD_POST_SUCCESS,
LOAD_POST_FAILURE,
LOAD_POST_REQUEST,
LOAD_POST_SUCCESS,
LOAD_POSTS_FAILURE,
LOAD_POSTS_REQUEST,
LOAD_POSTS_SUCCESS,
LOAD_USER_POSTS_FAILURE,
LOAD_USER_POSTS_REQUEST,
LOAD_USER_POSTS_SUCCESS,
COOK_UP_REQUEST,
COOK_UP_SUCCESS,
COOK_UP_FAILURE,
UPLOAD_IMAGES_FAILURE,
UPLOAD_IMAGES_REQUEST,
UPLOAD_IMAGES_SUCCESS,
LIKE_POST_FAILURE,
LIKE_POST_REQUEST,
LIKE_POST_SUCCESS,
UNLIKE_POST_FAILURE,
UNLIKE_POST_REQUEST,
UNLIKE_POST_SUCCESS,
FLFOOD_UP_REQUEST,
FLFOOD_UP_SUCCESS,
FLFOOD_UP_FAILURE,
DELETE_FLFOOD_UP_REQUEST,
DELETE_FLFOOD_UP_SUCCESS,
DELETE_FLFOOD_UP_FAILURE,
ADD_COMMENT_FAILURE,
ADD_COMMENT_REQUEST,
ADD_COMMENT_SUCCESS,
INITIAL_FAILURE,
INITIAL_REQUEST,
INITIAL_SUCCESS,
REMOVE_POST_FAILURE,
REMOVE_POST_REQUEST,
REMOVE_POST_SUCCESS,
UPDATE_POST_FAILURE,
UPDATE_POST_REQUEST,
UPDATE_POST_SUCCESS,
LOAD_HASHTAG_POSTS_FAILURE,
LOAD_HASHTAG_POSTS_REQUEST,
LOAD_HASHTAG_POSTS_SUCCESS,
REMOVE_COMMENT_FAILURE,
REMOVE_COMMENT_REQUEST,
REMOVE_COMMENT_SUCCESS,
EDIT_COMMENT_FAILURE,
EDIT_COMMENT_REQUEST,
EDIT_COMMENT_SUCCESS,
} from '../reducers/post';
import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user';
function uploadImagesAPI(data) {
return axios.post('/post/images', data);
}
function* uploadImages(action) {
try {
const result = yield call(uploadImagesAPI, action.data);
yield put({
type: UPLOAD_IMAGES_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UPLOAD_IMAGES_FAILURE,
error: err.response.data,
});
}
}
function likePostAPI(data) {
return axios.patch(`/post/${data}/like`);
}
function* likePost(action) {
try {
const result = yield call(likePostAPI, action.data);
yield put({
type: LIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LIKE_POST_FAILURE,
error: err.response.data,
});
}
}
function unlikePostAPI(data) {
return axios.delete(`/post/${data}/like`);
}
function* unlikePost(action) {
try {
const result = yield call(unlikePostAPI, action.data);
yield put({
type: UNLIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UNLIKE_POST_FAILURE,
error: err.response.data,
});
}
}
function loadPostAPI(data) {
return axios.get(`/post/${data}`);
}
function* loadPost(action) {
try {
const result = yield call(loadPostAPI, action.data);
yield put({
type: LOAD_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_POST_FAILURE,
error: err.response.data,
});
}
}
function loadUserPostsAPI(data, lastId) {
return axios.get(`/posts/my/postss?lastId=${lastId || 0}`);
}
function* loadUserPosts(action) {
try {
const result = yield call(loadUserPostsAPI, action.data, action.lastId);
yield put({
type: LOAD_USER_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_USER_POSTS_FAILURE,
error: err.response.data,
});
}
}
function loadPostsAPI(lastId) {
return axios.get(`/posts?lastId=${lastId || 0}`);
}
function* loadPosts(action) {
try {
const result = yield call(loadPostsAPI, action.lastId);
yield put({
type: LOAD_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_POSTS_FAILURE,
error: err.response.data,
});
}
}
function cookUpAPI(data, lastId) {
return axios.post(`/posts/cookup/postss?lastId=${lastId || 0}`, data);
}
function* cookupPost(action) {
try {
const result = yield call(cookUpAPI, action.data, action.lastId);
yield put({
type: COOK_UP_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: COOK_UP_FAILURE,
error: err.response.data,
});
}
}
function flfoodUpAPI(data) {
return axios.get('/posts/related', data);
}
function* flfoodPost(action) {
try {
const result = yield call(flfoodUpAPI, action.data);
yield put({
type: FLFOOD_UP_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: FLFOOD_UP_FAILURE,
error: err.response.data,
});
}
}
function* DeleteflfoodPost(action) {
try {
const result = action.data;
yield put({
type: DELETE_FLFOOD_UP_SUCCESS,
data: result,
});
} catch (err) {
console.error(err);
yield put({
type: DELETE_FLFOOD_UP_FAILURE,
error: err.response.data,
});
}
}
function addPostAPI(action) {
return axios.post('/post', action);
}
function* addPost(action) {
try {
const result = yield call(addPostAPI, action);
yield put({
type: ADD_POST_SUCCESS,
data: result.data,
});
yield put({
type: ADD_POST_TO_ME,
data: result.data.id,
});
} catch (err) {
console.error(err);
yield put({
type: ADD_POST_FAILURE,
error: err.response.data,
});
}
}
function addCommentAPI(data) {
return axios.post(`/post/${data.postId}/comment`, data); // POST /post/1/comment
}
function* addComment(action) {
try {
const result = yield call(addCommentAPI, action.data);
yield put({
type: ADD_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: ADD_COMMENT_FAILURE,
error: err.response.data,
});
}
}
function* intial(action) {
try {
const result = [];
yield put({
type: INITIAL_SUCCESS,
data: result,
});
} catch (err) {
console.error(err);
yield put({
type: INITIAL_FAILURE,
error: err.response.data,
});
}
}
function removePostAPI(data) {
return axios.delete(`/post/${data}`);
}
function* removePost(action) {
try {
const result = yield call(removePostAPI, action.data);
yield put({
type: REMOVE_POST_SUCCESS,
data: result.data,
});
yield put({
type: REMOVE_POST_OF_ME,
data: action.data,
});
} catch (err) {
console.error(err);
yield put({
type: REMOVE_POST_FAILURE,
error: err.response.data,
});
}
}
function updatePostAPI(data) {
return axios.patch(`/post/${data.PostId}`, data);
}
function* updatePost(action) {
try {
const result = yield call(updatePostAPI, action.data);
console.log("result:",result);
yield put({
type: UPDATE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UPDATE_POST_FAILURE,
error: err.response.data,
});
}
}
function loadHashtagPostsAPI(data, lastId) {
return axios.get(`/hashtag/${encodeURIComponent(data)}?lastId=${lastId || 0}`);
}
function* loadHashtagPosts(action) {
try {
console.log("action:::",action);
console.log('loadHashtag console');
const result = yield call(loadHashtagPostsAPI, action.data, action.lastId);
yield put({
type: LOAD_HASHTAG_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_HASHTAG_POSTS_FAILURE,
error: err.response.data,
});
}
}
function commentremovePostAPI(data) {
return axios.post(`/post/removecomment/`,data);
}
function* commentremovePost(action) {
try {
const result = yield call(commentremovePostAPI, action.data);
yield put({
type: REMOVE_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: REMOVE_COMMENT_FAILURE,
error: err.response.data,
});
}
}
function EditCommenPostAPI(data) {
return axios.patch(`/post/editcomment/`,data);
}
function* EditCommentPosts(action) {
try {
// console.log("action:",action);
const result = yield call(EditCommenPostAPI, action.data);
console.log("result:::",result);
yield put({
type:EDIT_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: EDIT_COMMENT_FAILURE,
error: err.response.data,
});
}
}
function* watchUploadImages() {
yield takeLatest(UPLOAD_IMAGES_REQUEST, uploadImages);
}
function* watchLoadPost() {
yield takeLatest(LOAD_POST_REQUEST, loadPost);
}
function* watchLikePost() {
yield takeLatest(LIKE_POST_REQUEST, likePost);
}
function* watchUnlikePost() {
yield takeLatest(UNLIKE_POST_REQUEST, unlikePost);
}
function* watchAddPost() {
yield takeLatest(ADD_POST_REQUEST, addPost);
}
function* watchLoadUserPosts() {
yield throttle(5000, LOAD_USER_POSTS_REQUEST, loadUserPosts);
}
function* watchLoadPosts() {
yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts);
}
function* watchCookupPosts() {
yield throttle(1000, COOK_UP_REQUEST, cookupPost);
}
function* watchFlfoodupPosts() {
yield throttle(5000, FLFOOD_UP_REQUEST, flfoodPost);
}
function* watchDeleteFlfoodupPosts() {
yield throttle(5000, DELETE_FLFOOD_UP_REQUEST, DeleteflfoodPost);
}
function* watchAddComment() {
yield takeLatest(ADD_COMMENT_REQUEST, addComment);
}
function* watchintial() {
yield takeLatest(INITIAL_REQUEST, intial);
}
function* watchRemovePost() {
yield takeLatest(REMOVE_POST_REQUEST, removePost);
}
function* watchUpdatePost() {
yield takeLatest(UPDATE_POST_REQUEST, updatePost);
}
function* watchLoadHashtagPosts() {
yield throttle(5000, LOAD_HASHTAG_POSTS_REQUEST, loadHashtagPosts);
}
function* watchCommentRemovePost() {
yield takeLatest(REMOVE_COMMENT_REQUEST, commentremovePost);
}
function* watchEditCommentPost() {
yield takeLatest(EDIT_COMMENT_REQUEST, EditCommentPosts);
}
export default function* postSaga() {
yield all([
fork(watchUploadImages),
fork(watchLikePost),
fork(watchUnlikePost),
fork(watchLoadPost),
fork(watchAddPost),
fork(watchLoadUserPosts),
fork(watchLoadPosts),
fork(watchCookupPosts),
fork(watchFlfoodupPosts),
fork(watchDeleteFlfoodupPosts),
fork(watchAddComment),
fork(watchintial),
fork(watchRemovePost),
fork(watchUpdatePost),
fork(watchLoadHashtagPosts),
fork(watchCommentRemovePost),
fork(watchEditCommentPost),
]);
}
我感觉到这是两个网络调用。在您进行第二个调用之前，第一个需要完成。如果是这种情况，并且您估计通常需要 100 毫秒才能完成，那么这是不好的做法。它使您的代码不可靠。在这种情况下我会做的是摆脱 setTimeout 并将第二个调度调用作为回调函数发送到第一个调度。即
const onLikeCallback = () => {
dispatch({
type: LIKE_POST_REQUEST,
data: singlePost?.id,
})
}
const onLike = () => {
dispatch({
type:LOAD_POST_REQUEST,
data:singlePost.id,
callback: onLikeCallback
})
}
然后在您发出 API 请求的承诺解决后调用 action.callback()。即
likeApiPromise(action.data).then(res => action.callback())
或
await likeApiPromise(action.data)
action.callback()
编辑：
由于您使用的是 Saga，因此更容易！您需要做的就是：
function* likePost(action) {
try {
const result = yield call(likePostAPI, action.data);
yield put({
type: LOAD_POST_REQUEST,
data: action.data,
});
yield put({
type: LIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LIKE_POST_FAILURE,
error: err.response.data,
});
}
}
当我尝试按 onLike 按钮时，我想分派这个过程我想在 LIKE_POST_SUCESS 之后立即获得 LOAD_POST_SUCCESS 就像这个代码
但有时处理不可靠
像这样
从 'react' 导入 React，{useEffect，useState，useCallback}；
从 'styled-components/native' 导入样式；
从'../../../reducers/post'导入{LOAD_POST_REQUEST,LIKE_POST_REQUEST,UNLIKE_POST_REQUEST,INITIAL_REQUEST,COOK_UP_REQUEST}；
从 'react-redux' 导入 {useDispatch,useSelector}；
进口 {
RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone,
} 来自“@ant-design/icons”；
从 '../../components/IconButton' 导入 IconButton；
从 'react-native';
导入 {ImageBackground}
const Container = styled.View`
`;
const Hi = styled.Text`
`;
const IconButtonU = styled.Image`
width: 30px;
height: 30px;
`;
const LikeNumber = styled.Text`
`;
const MenuContainer = styled.TouchableOpacity`
width: 30px;
height: 30px;
`;
const Explain = ({navigation,route}) => {
const dispatch = useDispatch();
const {me} = useSelector((state) =>state.user);
const {singlePost} = useSelector((state) => state.post);
const onLike = () => {
return dispatch({
type: LIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const onUnlike = () => {
return dispatch({
type: UNLIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const liked = singlePost?.Likers.find((v) => v.id === me?.id);
return (
<Container>
<Hi>
안녕
</Hi>
{ liked
?
<MenuContainer onPress={onUnlike} >
<IconButtonU iconName="favorite"
style={{width:23, height:23}}
source={require('../../Assets/Images/Tabs/heart.png')}
/>
</MenuContainer>
:
<MenuContainer onPress={onLike} >
<IconButtonU iconName="favorite"
source={require('../../Assets/Images/Tabs/ic_favorite_outline.png')}
/>
</MenuContainer>
}
<LikeNumber>
좋아요{' '}
{singlePost?.Likers.length }
</LikeNumber>
</Container>
);
};
export default Explain;
当我按下 onLike 按钮时，我想分派加载进程
我想在 LIKE_POST_SUCESS
之后看到 LOAD_POST_SUCCESS当我按下 onLike 按钮时，我想分派加载进程
我想在 LIKE_POST_SUCESS
之后看到 LOAD_POST_SUCCESS像这样：
但有时过程不可靠
像这样：
import React, { useEffect, useState,useCallback } from 'react';
import styled from 'styled-components/native';
import {LOAD_POST_REQUEST,LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, INITIAL_REQUEST,COOK_UP_REQUEST} from '../../../reducers/post';
import {useDispatch,useSelector} from 'react-redux';
import {
RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone,
} from '@ant-design/icons';
import IconButton from '../../components/IconButton';
import { ImageBackground } from 'react-native';
const Container = styled.View`
`;
const Hi = styled.Text`
`;
const IconButtonU = styled.Image`
width: 30px;
height: 30px;
`;
const LikeNumber = styled.Text`
`;
const MenuContainer = styled.TouchableOpacity`
width: 30px;
height: 30px;
`;
const Explain = ({navigation,route}) => {
const dispatch = useDispatch();
const {me} = useSelector((state) =>state.user);
const {singlePost} = useSelector((state) => state.post);
const onLike = () => {
return dispatch({
type: LIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const onUnlike = () => {
return dispatch({
type: UNLIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const liked = singlePost?.Likers.find((v) => v.id === me?.id);
return (
<Container>
<Hi>
안녕
</Hi>
{ liked
?
<MenuContainer onPress={onUnlike} >
<IconButtonU iconName="favorite"
style={{width:23, height:23}}
source={require('../../Assets/Images/Tabs/heart.png')}
/>
</MenuContainer>
:
<MenuContainer onPress={onLike} >
<IconButtonU iconName="favorite"
source={require('../../Assets/Images/Tabs/ic_favorite_outline.png')}
/>
</MenuContainer>
}
<LikeNumber>
좋아요{' '}
{singlePost?.Likers.length }
</LikeNumber>
</Container>
);
};
export default Explain;
(saga/post.js)
import axios from 'axios';
import { all, fork, put, takeLatest, throttle, call } from 'redux-saga/effects';
import {
ADD_POST_FAILURE,
ADD_POST_REQUEST,
ADD_POST_SUCCESS,
LOAD_POST_FAILURE,
LOAD_POST_REQUEST,
LOAD_POST_SUCCESS,
LOAD_POSTS_FAILURE,
LOAD_POSTS_REQUEST,
LOAD_POSTS_SUCCESS,
LOAD_USER_POSTS_FAILURE,
LOAD_USER_POSTS_REQUEST,
LOAD_USER_POSTS_SUCCESS,
COOK_UP_REQUEST,
COOK_UP_SUCCESS,
COOK_UP_FAILURE,
UPLOAD_IMAGES_FAILURE,
UPLOAD_IMAGES_REQUEST,
UPLOAD_IMAGES_SUCCESS,
LIKE_POST_FAILURE,
LIKE_POST_REQUEST,
LIKE_POST_SUCCESS,
UNLIKE_POST_FAILURE,
UNLIKE_POST_REQUEST,
UNLIKE_POST_SUCCESS,
FLFOOD_UP_REQUEST,
FLFOOD_UP_SUCCESS,
FLFOOD_UP_FAILURE,
DELETE_FLFOOD_UP_REQUEST,
DELETE_FLFOOD_UP_SUCCESS,
DELETE_FLFOOD_UP_FAILURE,
ADD_COMMENT_FAILURE,
ADD_COMMENT_REQUEST,
ADD_COMMENT_SUCCESS,
INITIAL_FAILURE,
INITIAL_REQUEST,
INITIAL_SUCCESS,
REMOVE_POST_FAILURE,
REMOVE_POST_REQUEST,
REMOVE_POST_SUCCESS,
UPDATE_POST_FAILURE,
UPDATE_POST_REQUEST,
UPDATE_POST_SUCCESS,
LOAD_HASHTAG_POSTS_FAILURE,
LOAD_HASHTAG_POSTS_REQUEST,
LOAD_HASHTAG_POSTS_SUCCESS,
REMOVE_COMMENT_FAILURE,
REMOVE_COMMENT_REQUEST,
REMOVE_COMMENT_SUCCESS,
EDIT_COMMENT_FAILURE,
EDIT_COMMENT_REQUEST,
EDIT_COMMENT_SUCCESS,
} from '../reducers/post';
import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user';
function uploadImagesAPI(data) {
return axios.post('/post/images', data);
}
function* uploadImages(action) {
try {
const result = yield call(uploadImagesAPI, action.data);
yield put({
type: UPLOAD_IMAGES_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UPLOAD_IMAGES_FAILURE,
error: err.response.data,
});
}
}
function likePostAPI(data) {
return axios.patch(`/post/${data}/like`);
}
function* likePost(action) {
try {
const result = yield call(likePostAPI, action.data);
yield put({
type: LIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LIKE_POST_FAILURE,
error: err.response.data,
});
}
}
function unlikePostAPI(data) {
return axios.delete(`/post/${data}/like`);
}
function* unlikePost(action) {
try {
const result = yield call(unlikePostAPI, action.data);
yield put({
type: UNLIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UNLIKE_POST_FAILURE,
error: err.response.data,
});
}
}
function loadPostAPI(data) {
return axios.get(`/post/${data}`);
}
function* loadPost(action) {
try {
const result = yield call(loadPostAPI, action.data);
yield put({
type: LOAD_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_POST_FAILURE,
error: err.response.data,
});
}
}
function loadUserPostsAPI(data, lastId) {
return axios.get(`/posts/my/postss?lastId=${lastId || 0}`);
}
function* loadUserPosts(action) {
try {
const result = yield call(loadUserPostsAPI, action.data, action.lastId);
yield put({
type: LOAD_USER_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_USER_POSTS_FAILURE,
error: err.response.data,
});
}
}
function loadPostsAPI(lastId) {
return axios.get(`/posts?lastId=${lastId || 0}`);
}
function* loadPosts(action) {
try {
const result = yield call(loadPostsAPI, action.lastId);
yield put({
type: LOAD_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_POSTS_FAILURE,
error: err.response.data,
});
}
}
function cookUpAPI(data, lastId) {
return axios.post(`/posts/cookup/postss?lastId=${lastId || 0}`, data);
}
function* cookupPost(action) {
try {
const result = yield call(cookUpAPI, action.data, action.lastId);
yield put({
type: COOK_UP_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: COOK_UP_FAILURE,
error: err.response.data,
});
}
}
function flfoodUpAPI(data) {
return axios.get('/posts/related', data);
}
function* flfoodPost(action) {
try {
const result = yield call(flfoodUpAPI, action.data);
yield put({
type: FLFOOD_UP_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: FLFOOD_UP_FAILURE,
error: err.response.data,
});
}
}
function* DeleteflfoodPost(action) {
try {
const result = action.data;
yield put({
type: DELETE_FLFOOD_UP_SUCCESS,
data: result,
});
} catch (err) {
console.error(err);
yield put({
type: DELETE_FLFOOD_UP_FAILURE,
error: err.response.data,
});
}
}
function addPostAPI(action) {
return axios.post('/post', action);
}
function* addPost(action) {
try {
const result = yield call(addPostAPI, action);
yield put({
type: ADD_POST_SUCCESS,
data: result.data,
});
yield put({
type: ADD_POST_TO_ME,
data: result.data.id,
});
} catch (err) {
console.error(err);
yield put({
type: ADD_POST_FAILURE,
error: err.response.data,
});
}
}
function addCommentAPI(data) {
return axios.post(`/post/${data.postId}/comment`, data); // POST /post/1/comment
}
function* addComment(action) {
try {
const result = yield call(addCommentAPI, action.data);
yield put({
type: ADD_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: ADD_COMMENT_FAILURE,
error: err.response.data,
});
}
}
function* intial(action) {
try {
const result = [];
yield put({
type: INITIAL_SUCCESS,
data: result,
});
} catch (err) {
console.error(err);
yield put({
type: INITIAL_FAILURE,
error: err.response.data,
});
}
}
function removePostAPI(data) {
return axios.delete(`/post/${data}`);
}
function* removePost(action) {
try {
const result = yield call(removePostAPI, action.data);
yield put({
type: REMOVE_POST_SUCCESS,
data: result.data,
});
yield put({
type: REMOVE_POST_OF_ME,
data: action.data,
});
} catch (err) {
console.error(err);
yield put({
type: REMOVE_POST_FAILURE,
error: err.response.data,
});
}
}
function updatePostAPI(data) {
return axios.patch(`/post/${data.PostId}`, data);
}
function* updatePost(action) {
try {
const result = yield call(updatePostAPI, action.data);
console.log("result:",result);
yield put({
type: UPDATE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: UPDATE_POST_FAILURE,
error: err.response.data,
});
}
}
function loadHashtagPostsAPI(data, lastId) {
return axios.get(`/hashtag/${encodeURIComponent(data)}?lastId=${lastId || 0}`);
}
function* loadHashtagPosts(action) {
try {
console.log("action:::",action);
console.log('loadHashtag console');
const result = yield call(loadHashtagPostsAPI, action.data, action.lastId);
yield put({
type: LOAD_HASHTAG_POSTS_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LOAD_HASHTAG_POSTS_FAILURE,
error: err.response.data,
});
}
}
function commentremovePostAPI(data) {
return axios.post(`/post/removecomment/`,data);
}
function* commentremovePost(action) {
try {
const result = yield call(commentremovePostAPI, action.data);
yield put({
type: REMOVE_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: REMOVE_COMMENT_FAILURE,
error: err.response.data,
});
}
}
function EditCommenPostAPI(data) {
return axios.patch(`/post/editcomment/`,data);
}
function* EditCommentPosts(action) {
try {
// console.log("action:",action);
const result = yield call(EditCommenPostAPI, action.data);
console.log("result:::",result);
yield put({
type:EDIT_COMMENT_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: EDIT_COMMENT_FAILURE,
error: err.response.data,
});
}
}
function* watchUploadImages() {
yield takeLatest(UPLOAD_IMAGES_REQUEST, uploadImages);
}
function* watchLoadPost() {
yield takeLatest(LOAD_POST_REQUEST, loadPost);
}
function* watchLikePost() {
yield takeLatest(LIKE_POST_REQUEST, likePost);
}
function* watchUnlikePost() {
yield takeLatest(UNLIKE_POST_REQUEST, unlikePost);
}
function* watchAddPost() {
yield takeLatest(ADD_POST_REQUEST, addPost);
}
function* watchLoadUserPosts() {
yield throttle(5000, LOAD_USER_POSTS_REQUEST, loadUserPosts);
}
function* watchLoadPosts() {
yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts);
}
function* watchCookupPosts() {
yield throttle(1000, COOK_UP_REQUEST, cookupPost);
}
function* watchFlfoodupPosts() {
yield throttle(5000, FLFOOD_UP_REQUEST, flfoodPost);
}
function* watchDeleteFlfoodupPosts() {
yield throttle(5000, DELETE_FLFOOD_UP_REQUEST, DeleteflfoodPost);
}
function* watchAddComment() {
yield takeLatest(ADD_COMMENT_REQUEST, addComment);
}
function* watchintial() {
yield takeLatest(INITIAL_REQUEST, intial);
}
function* watchRemovePost() {
yield takeLatest(REMOVE_POST_REQUEST, removePost);
}
function* watchUpdatePost() {
yield takeLatest(UPDATE_POST_REQUEST, updatePost);
}
function* watchLoadHashtagPosts() {
yield throttle(5000, LOAD_HASHTAG_POSTS_REQUEST, loadHashtagPosts);
}
function* watchCommentRemovePost() {
yield takeLatest(REMOVE_COMMENT_REQUEST, commentremovePost);
}
function* watchEditCommentPost() {
yield takeLatest(EDIT_COMMENT_REQUEST, EditCommentPosts);
}
export default function* postSaga() {
yield all([
fork(watchUploadImages),
fork(watchLikePost),
fork(watchUnlikePost),
fork(watchLoadPost),
fork(watchAddPost),
fork(watchLoadUserPosts),
fork(watchLoadPosts),
fork(watchCookupPosts),
fork(watchFlfoodupPosts),
fork(watchDeleteFlfoodupPosts),
fork(watchAddComment),
fork(watchintial),
fork(watchRemovePost),
fork(watchUpdatePost),
fork(watchLoadHashtagPosts),
fork(watchCommentRemovePost),
fork(watchEditCommentPost),
]);
}
我感觉到这是两个网络调用。在您进行第二个调用之前，第一个需要完成。如果是这种情况，并且您估计通常需要 100 毫秒才能完成，那么这是不好的做法。它使您的代码不可靠。在这种情况下我会做的是摆脱 setTimeout 并将第二个调度调用作为回调函数发送到第一个调度。即
const onLikeCallback = () => {
dispatch({
type: LIKE_POST_REQUEST,
data: singlePost?.id,
})
}
const onLike = () => {
dispatch({
type:LOAD_POST_REQUEST,
data:singlePost.id,
callback: onLikeCallback
})
}
然后在您发出 API 请求的承诺解决后调用 action.callback()。即
likeApiPromise(action.data).then(res => action.callback())
或
await likeApiPromise(action.data)
action.callback()
编辑： 由于您使用的是 Saga，因此更容易！您需要做的就是：
function* likePost(action) {
try {
const result = yield call(likePostAPI, action.data);
yield put({
type: LOAD_POST_REQUEST,
data: action.data,
});
yield put({
type: LIKE_POST_SUCCESS,
data: result.data,
});
} catch (err) {
console.error(err);
yield put({
type: LIKE_POST_FAILURE,
error: err.response.data,
});
}
}
当我尝试按 onLike 按钮时，我想分派这个过程我想在 LIKE_POST_SUCESS 之后立即获得 LOAD_POST_SUCCESS 就像这个代码
但有时处理不可靠
像这样
从 'react' 导入 React，{useEffect，useState，useCallback}； 从 'styled-components/native' 导入样式； 从'../../../reducers/post'导入{LOAD_POST_REQUEST,LIKE_POST_REQUEST,UNLIKE_POST_REQUEST,INITIAL_REQUEST,COOK_UP_REQUEST}； 从 'react-redux' 导入 {useDispatch,useSelector}； 进口 { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone, } 来自“@ant-design/icons”； 从 '../../components/IconButton' 导入 IconButton； 从 'react-native';
导入 {ImageBackground} const Container = styled.View`
`;
const Hi = styled.Text`
`;
const IconButtonU = styled.Image`
width: 30px;
height: 30px;
`;
const LikeNumber = styled.Text`
`;
const MenuContainer = styled.TouchableOpacity`
width: 30px;
height: 30px;
`;
const Explain = ({navigation,route}) => {
const dispatch = useDispatch();
const {me} = useSelector((state) =>state.user);
const {singlePost} = useSelector((state) => state.post);
const onLike = () => {
return dispatch({
type: LIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const onUnlike = () => {
return dispatch({
type: UNLIKE_POST_REQUEST,
data: singlePost?.id,
}),
dispatch({
type: LOAD_POST_REQUEST,
data:singlePost.id
})
}
const liked = singlePost?.Likers.find((v) => v.id === me?.id);
return (
<Container>
<Hi>
안녕
</Hi>
{ liked
?
<MenuContainer onPress={onUnlike} >
<IconButtonU iconName="favorite"
style={{width:23, height:23}}
source={require('../../Assets/Images/Tabs/heart.png')}
/>
</MenuContainer>
:
<MenuContainer onPress={onLike} >
<IconButtonU iconName="favorite"
source={require('../../Assets/Images/Tabs/ic_favorite_outline.png')}
/>
</MenuContainer>
}
<LikeNumber>
좋아요{' '}
{singlePost?.Likers.length }
</LikeNumber>
</Container>
);
};
export default Explain;