작성
·
123
0
import React, { useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import useInput from '../hooks/useInput';
import { ADD_COMMENT_REQUEST, ADD_COMMENT_RESET } from '../reducers/post';
const CommentForm = ({ post }) => {
const dispatch = useDispatch();
const { addCommentDone, addCommentLoading, addCommentError } = useSelector((state) => state.post);
const [commentText, onChangeCommentText, setCommentText] = useInput('');
useEffect(() => {
if (addCommentDone) {
setCommentText('');
}
}, [addCommentDone]);
useEffect(() => {
if (addCommentError) {
alert(addCommentError);
dispatch({ type: ADD_COMMENT_RESET });
}
}, [addCommentError]);
const onSubmitComment = useCallback(() => {
dispatch({
type: ADD_COMMENT_REQUEST,
data: { content: commentText, postId: post.id },
});
}, [commentText]);
return (
<Form onFinish={onSubmitComment}>
<Form.Item style={{ position: 'relative', margin: 0 }}>
<Input.TextArea value={commentText} onChange={onChangeCommentText} rows={4} />
<Button
style={{ position: 'absolute', right: 0, bottom: -40, zIndex: 1 }}
type="primary"
htmlType="submit"
loading={addCommentLoading}ß
>
댓글 입력
</Button>
</Form.Item>
</Form>
);
};
CommentForm.propTypes = {
post: PropTypes.object.isRequired,
};
export default CommentForm;
위 코드는 CommentForm 컴포넌트인데 비로그인 상태에서 댓글 입력 버튼을 클릭하면 ADD_COMMENT_FAILURE 액션이 실행되고
alert(addCommentError)를 알람 설정했습니다! 근데 이때 댓글폼을 세 개 열어 놓고 댓글 입력 버튼을 클릭하면 세 번 알람이 되더라구요..ㅠㅠㅠ 혹시 한 번만 알람되도록 설정하는 방법이 있을까하고 여쭤봅니다...ㅠ
ADD_COMMENT_RESET은 그냥 addCommentError: false로 바꿔주는 것 말고는 없습니다.
그리고 이번에 라이브러리 최신화한 것 감사합니다! 강의 내용은 아니지만 다름이 아니라 intersection 폴더에서 컴포넌트들 화살표 함수에서 함수 선언식으로 바꾸셨던데 이유가 있을까요??
답변 1
1
alert 부분을 redux-saga의 catch 부분 안으로 넣으시면 됩니다. 사가는 하나뿐이라서 얼럿이 한번만 됩니다.
펑션으로 바꾼 이유는 eslint 룰이 그걸 권장하는 것으로 바뀌어서 그랬습니다.
그런 쉬운 방법이....!! 너무 컴포넌트에만 써야한다고 생각했네요.. 감사합니다!!