redux - react & redux

춤추는개발자·2023년 5월 15일
0
post-thumbnail

요번에는 redux 를 react 에서 사용해볼려고 합니다.
먼저

npm install redux redux-react

를 통해서 redux, redux-react 라이브러리를 설치 해줍니다.

react-redux 에서는 상태 값을 바로 접근 할 수 있는 hooks 를 제공 합니다.

useSelector()

기존의 redux 에서는 스토어의 상태를 가져오기 위해서 store.getState() 를 사용해 현재 스토어의 상태 객체를 반환 받았습니다.
react 에서는 useSelector() 로 스토어의 현재 상태를 반환 받을 수 있습니다.
useSelector 는 스토어의 상태가 바뀌면 바뀐 상태를 다시 반환받아 컴포넌트를 렌더링 합니다.
스토어에 있는 상태를 가지고 오는 것은 간단 합니다. useSelector 에 state 를 전달 받는 콜백 함수를 인수로 받고 그 콜백함수에서 원하는 모듈의 state 를 return 해주면 됩니다. 예를 들어 counter 모듈의 value 값을 가지고 온다고 한다면

import {useSelector} from "react-redux";

const value = useSelector(state=> {
  return state.counter.value;
});

위와 같이 코드를 작성하면 됩니다.

useDispatch()

기존의 redux 에서 dispatch() 함수를 사용하는 것과 같다. 하지만 조금 방법이 다르다.

import {useDispatch} from "react-redux";

const dispatch = useDispatch();

위와 같이 useDispatch() 로 dispatch 함수를 반환 받아.
선언한 dispatch 를 이용해 기존의 redux 처럼 dispatch 를 사용하면 된다.

0개의 댓글