토재웅
696
2021-09-23 18:28:35
7
185

[React 질문] 리덕스 툴킷 이용해서 투두리스트 예제를 만들고 있는데요 !!!


깃허브 주소

안녕하세요 !! 선배님들 !!

리덕스 툴킷을 공부하고 있습니다.

저의 components 폴더의 Todo.jsx에 오류가 났습니다.

에러는 아래와 같이 배열 내장함수인 map을 사용할 수 없다는것입니다.

제 생각에는 container 폴더의 TodoContainer파일의 7번째 줄에서 useSelector를 사용해서 state값에 접근을 못하고 있는거 같습니다.

  const {input,todos} = useSelector(state=> state)
  const dispatch = useDispatch();

그래서, state의 todos배열에 접근하지 못해서 에러가 난거 같습니다.

어떻게 하면 useSelector를 올바르게 사용해서 state에 접근할수 있을까요??

혹시 제가 생각하는 문제외에 다른 문제가 있다면 지적해주시면 감사하겠습니다 !!

0
  • 답변 7

  • seacont
    82
    2021-09-23 22:06:29
    const {input,todos} = useSelector(state=> state.todosSlice)

    와 같이 해보세요.

  • 토재웅
    696
    2021-09-23 22:18:34

    seacont

    선배님 !! 정말 감사합니다. ㅠㅠ

    이걸로 몇시간동안 애먹었습니다 ㅠㅜㅠ

    정말 신기하네요 !!!

    무슨 원리인지는 잘모르겟지만...ㄷㄷ...

    으음...

    제가 알기로는 useSelector 의 state가 todosSlice.js의 initialState를 가져오는 걸로 알고 있는데...

    쌩뚱맞게 todosSlice를 넣으니까 되다니... 전혀 생각지도 못했네옹 !!

    선배님, 제가 많이 부족합니다 ㅠㅠ

    혹시, 이부분에 대한 간단한 설명 부탁드려도 되겠습니까??  

    존경합니다. 선배님 !! 충성충성 ^^7

  • 잉랑동딩
    112
    2021-09-23 22:31:16 작성 2021-09-23 22:31:47 수정됨

    저도 useSelector가 뭐하는거인지는 몰라서 자세히 설명은 못드리지만 그냥 설치해서 코드 뜯어보고 분석한거를 토대로 알려드리자면

    useselector의 구조는 아래랑 같습니다.

    export function useSelector<TState = DefaultRootStateTSelected = unknown>(
        selector: (stateTState=> TSelected,
        equalityFn?: (leftTSelectedrightTSelected=> boolean
    ): TSelected;


    여기서 글쓴이 분이 

     const {input,todos} = useSelector(state=> state)

    와 같이 호출을 해서 

    selector부분에 state를 가져와 TSelected의 타입을 가진 state로 보냈는데요 

    Type definition이 제대로 되어있지 않아 자세히는 알 수 없지만 아마 TSelected의 구조가


    {

    ...

    todosSlice:{input:any, todos:any[]} 

    } 와 같은 오브젝트로 이루어져 있을 것 같네요  


    그리고 글쓴이분은 저 object안의 todoSlice가 아니라 object를 해체할당으로 input,todos로 받으려고 하셨으니 해당 key가 존재하지 않아서 undefined가 들어가서 저런 오류가 뜬거고요 


    아마 공식문서에 구조에 대한 설명이 되어있을 것 같은데 참고하시길 바랍니다.

  • seacont
    82
    2021-09-23 22:45:41

    useSelector 훅은 리덕스의 특정 슬라이스를 인자로 받지 않고, 최상위 state 객체를 인자로 받는데, 토재웅님께서 state 객체를 아래와 같이 정의하셨습니다.

    const store = configureStore({
      reducer: {
        counterSlice,
        todosSlice
      }
    })

    아래와 같이 콘솔로그 찍어보시면 state 객체의 구조를 확인하실 수 있을 거에요.

    const {input,todos} = useSelector(state=> {console.log(state); state.todosSlice})
  • 토재웅
    696
    2021-09-23 23:11:39

    seacont

    아하 !!! configureStore에서 state객체를 정의하는거였군요 !!!

    제가 클론코딩을 해가지구 개념이 부족햇네여...ㅠㅠ

    이제 완전히 이해가 되었습니다. !! 

    추가 설명 감사합니다. 선배님 !! 충성충성 ^^7

  • 토재웅
    696
    2021-09-23 23:13:52

    잉랑동딩

    선배님 감사합니다. !!


    seacont 님의 설명을 보고난 후 잉랑동딩님의 설명을 이해 할 수 있었습니다. !!

    도움에 항상 감사합니다.. 충성충성 &&7

  • 토재웅
    696
    2021-09-24 14:25:03
  • 로그인을 하시면 답변을 등록할 수 있습니다.