react-redux 사용 예시

2023. 3. 30. 17:31개발/토막난 상식

반응형
const dispatch = useDispatch();

  const { codeList, codeListError, codeDetail, codeDetailError } = useSelector(
    ({ codeReducer }) => ({
      codeList: codeReducer.codeList,
      codeDetail: codeReducer.codeDetail,
    })
  );

  useEffect(() => {
    dispatch(codeAction.getCodeList({ target: "codeList" }));
  }, []);

useDispatch()와 useSelector()는 React-Redux 라이브러리에서 제공하는 hook입니다. useDispatch()는 Redux store에 action을 dispatch하기 위한 함수를 반환하고, useSelector()는 Redux store의 state를 선택하는 함수입니다.

const dispatch = useDispatch();는 useDispatch()를 호출하여 Redux store에 action을 dispatch하기 위한 함수를 dispatch 상수에 할당합니다.

const { codeList, codeListError, codeDetail, codeDetailError } = useSelector(...)는 useSelector()를 호출하여 codeReducer라는 Redux store의 state를 선택합니다. codeList, codeListError, codeDetail, codeDetailError는 codeReducer의 하위 객체입니다.

useEffect(() => { dispatch(codeAction.getCodeList({ target: "codeList" })); }, []);는 컴포넌트가 mount될 때 한 번 실행되고, dispatch()를 사용하여 getCodeList action을 호출합니다. getCodeList action은 target 속성을 이용해 codeList를 대상으로 코드 목록을 가져오는 것을 명시합니다.

이 코드는 Redux store에서 codeReducer의 state를 선택하여 해당 state에 접근하고, getCodeList action을 dispatch하여 데이터를 가져오는 예시입니다.

반응형