인프런 커뮤니티 질문&답변

안녕하세요 강사님, 비동기 통신 관련해서 질문이 있습니다.

상세페이지를 만들면서 map 돌린 것 중 어떤 아이템을 클릭하면 아이템의 이름을 url 주소에 넣고, 그걸 매개변수로 데이터를 가져오려고 합니다.

그래서 api를 result를 매개변수로 아래와 같이 만들고 saga도 만들었습니다.

getWordArt: (result) => localApi.get("/api/markets/search?text=" + result),

function* loadSearchArt(action) {

try {

const result = yield call(ArtApi.getWordArt());

yield put({

type: SEARCHART_SUCCESS,

data: result.data,

});

} catch (err) {

yield put({

type: SEARCHART_FAILURE,

error: err.response.data,

});

}

}

function* watchLoadSearchArt() {

yield takeLatest(SEARCHART_REQUEST, loadSearchArt);

}

export default function* ArtSaga() {

yield all([

fork(watchLoadSearchArt),

]);

}

그리고 useParams로 result를 가져와서 아래처럼 getWordArt에 매개변수로 넣었습니다.

const { result } = useParams();

useEffect(() => {

ArtApi.getWordArt(result)

.then((res) => {

setSearchArt(res.data.data.markets);

})

.catch((err) => {

throw new Error(err);

});

}, [result]);

데이터는 잘 가져오는데 이 코드를 dispatch를 사용해서 아래처럼 수정하고 싶은데 어떻게 하면 좋을지 잘 모르겠어서 질문합니다.

useEffect(() => {

dispatch({

type: SEARCHART_REQUEST,

});

}, [dispatch]);

저런 코드에 result를 여기저기 넣어봤는데 데이터를 못 가져옵니다ㅜㅜ

아래에 reducer도 같이 첨부합니다.

const initialState = {

searchArt: [],

searchArtLoading: false,

searchArtDone: false,

searchArtError: null

}

export const SALEART_REQUEST = "SALEART_REQUEST";

export const SALEART_SUCCESS = "SALEART_SUCCESS";

export const SALEART_FAILURE = "SALEART_FAILURE";

const ArtReducer = (state = initialState, action) => {

return produce(state, (draft) => {

switch (action.type) {

case SEARCHART_REQUEST:

draft.searchArtLoading = true;

draft.searchArtDone = false;

draft.searchArtError = null;

break;

case SEARCHART_SUCCESS:

draft.searchArtLoading = false;

draft.searchArtDone = true;

draft.searchArt = action.data.data;

break;

case SEARCHART_FAILURE:

draft.searchArtLoading = false;

draft.searchArtDone = true;

draft.searchArtError = action.data.error;

break;

default:

return;

}

});

};