OKKY - Change Logs

리액트 훅에서 리덕스를 통해 상태 불러오는 방법 없을까요?

기존에는 useEffect 안에서 API를 호출하여 상태를 설정하는 방식이었습니다.

이걸 리액트 리덕스로 상태관리를 하려고 하는데 TypeError: data.map is not a function 오류가 발생합니다.

아래 기존코드와 변경한 코드 확인부탁드립니다.

* 기존 코드입니다.

// 기존 코드
useEffect(() => {
        post('/admin/adminList')
            .then(res => {
                setState({
                    values: res.data.list,
                    adminCnt: res.data.adminCnt
                });
            })
            .catch(err => {
                throw(err);
            });
}, []);

const callbackComponents = (data) => {
  return data.map((c, index) => {
            return <AdminListTable
                key={index} 
                index={index}
                adminId={c.adminId} email={c.email} name={c.name} phoneNo= 
                {c.phoneNo} createDt={c.createDt} useYn={c.useYn} secYn= 
                {c.secYn}
            />
        })
};

return (
<Table>
 {state.values ? callbackComponents(adminList.values) : null }
</Table>

* 리덕스로 불러온 코드입니다.

// 리덕스로 가져온 상태
const dispatch = useDispatch();

useEffect(() => {
        dispatch(getAdminListing());
}, [dispatch]);

const adminList = useSelector(state => state.adminList) || '';

// 이 펑션을 실행했을 때 data.map is not a function 오류가 발생합니다.
const callbackComponents = (data) => {
        console.log(data);
        return data.map((c, index) => {
            return <AdminListTable
                key={index} 
                index={index}
                adminId={c.adminId} email={c.email} name={c.name} phoneNo= 
                {c.phoneNo} createDt={c.createDt} useYn={c.useYn} secYn= 
                {c.secYn}
            />
        })
}

return (
<Table>
  {adminList.values ? callbackComponents(adminList.values) : null}
</Table>

오류가 나서 useEffect 안에 useSelector를 넣어보았는데 그것도 useSelector를 호출할 수 없다는 오류가 나타났습니다.

이런경우 어떻게 해결해야 할까요?ㅠㅠ