覚書 ReduxのuseDispatchを使ってコードをシンプルにする

Reduxの7.1.0からuseDispatchが追加されました。

これまでは dispatch をする際には、connectを使う必要がありましたが、useDispatchを使うことでよりシンプルに書けるようになりました。

マニュアルは以下です。

https://react-redux.js.org/api/hooks#usedispatch

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>
  )
}

React, 覚書

Posted by たみぼうず