React-Redux hooks

React-Redux란 react에서 redux를 사용하기 편하게 여러가지 hook을 제공해주는 라이브러리이다.

useDispatch

useDispatch 은 Context 에 포함된 dispatch 를 가져올 수 있다. 이 dispatch 를 이용해 action 을 발생시킨다.

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

useSelector

useSelector는 store의 state의 데이터를 할당할 수 있도록 하는 hook이다. 연결된 action이 dispatch 될때마다, useSelector에 접근되어 값을 반환하게 된다.

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector((state) => state.counter)
  return <div>{counter}</div>
}

useStore

useStore Hook 은 컴포넌트 내에서 store 를 사용 할 수 있게 해준다.

import React from 'react'
import { useStore } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const store = useStore()

  // EXAMPLE ONLY! Do not do this in a real app.
  // The component will not automatically update if the store state changes
  return <div>{store.getState()}</div>
}

참고:

• https://react-redux.js.org/api/hooks