해결된 질문
22.12.11 14:17 작성
·
346
0
짹짹
버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다.
useEffect가 addPostDone
이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다.
PostAction
export const ADD_POST_REQUEST = 'ADD_POST_REQUEST';
export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS';
export const ADD_POST_FAILURE = 'ADD_POST_FAILURE';
const addPostRequestAction = (data) => ({
type: ADD_POST_REQUEST,
data,
});
export {
addPostRequestAction,
};
post.js (reducer)
import shortId from 'shortid';
const dummyPost = (data) => ({
id: shortId.generate(),
content: data,
User: {
id: 1,
nickname: 'admin',
},
Images: [],
Comments: [],
});
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_POST_REQUEST:
console.log('ADD_POST_REDUCER');
return {
...state,
addPostLoading: true,
addPostDone: false,
addPostError: null,
};
case ADD_POST_SUCCESS:
return {
...state,
mainPosts: [dummyPost(action.data), ...state.mainPosts],
addPostLoading: false,
addPostDone: true,
};
case ADD_POST_FAILURE:
return {
...state,
addPostLoading: false,
addPostError: action.error,
};
default:
return state;
}
};
==Redux-Saga===
index.js(rootSaga)
import { all, fork } from 'redux-saga/effects';
import postSaga from './post';
import userSaga from './user';
export default function* rootSaga() {
yield all([
fork(postSaga),
fork(userSaga),
]);
}
postSaga
import { all, fork, takeLatest, put, delay } from 'redux-saga/effects';
import axios from 'axios';
import {
ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE,
} from '../reducers/Actions/post';
function* addPostRequest(action) {
try {
// const result = yield call(addPostAPI,action.data)
delay(1000);
yield put({
type: ADD_POST_SUCCESS,
data: action.data,
});
} catch (err) {
yield put({
type: ADD_POST_FAILURE,
error: err.response.data,
});
}
}
function* watchAddPost() {
yield takeLatest(ADD_POST_REQUEST, addPostRequest);
}
export default function* postSaga() {
yield all([
fork(watchAddPost),
]);
}
==Component==
PostForm.js
import { useCallback, useRef, useEffect, useState } from 'react';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { addPostRequestAction } from '../reducers/Actions/post';
const PostForm = () => {
const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post);
const [text, setText] = useState('');
const dispatch = useDispatch();
useEffect(() => {
if (addPostDone) {
setText('');
}
}, [addPostDone]);
const onSubmit = useCallback(() => {
dispatch(addPostRequestAction(text));
}, [text]);
const onChangeText = useCallback((e) => setText(e.target.value), []);
return (
<Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}>
<Input.TextArea
value={text}
onChange={onChangeText}
maxLength={140}
placeholder="어떤 신기한 일이 있었나요?"
/>
<div>
{imagePaths.map((v) => (
<div key={v} style={{ display: 'inline-block' }}>
<img src={v} style={{ width: '200px' }} alt={v} />
<div>
<Button>제거</Button>
</div>
</div>
))}
</div>
</Form>
);
};
export default PostForm;