data-engineer's note

データエンジニアとしての色々な体験や知識をまとめる

react-reduxのhooksについて

目的

現在、開発でreact-reduxのconnect関数を利用し、reduxとの連携を行なっています。その一方で、functional componentを作成することが多いにもかかわらず、hooksを使えないのかと感じ始めました。そこで、ちょっと検索してみたら、react-reduxで提供してくれていることを知ったので、まとめておきます。

reduxで使えるhooks

reduxでは、色々と他にも使えるhookはあるのですが、ここではuseSelectorとuseDispatchの紹介をしておきます。

useSelector

このhookは、storeにアクセスするためのものです。これを利用することで、コンポーネント外で従来のようにmapStateToPropsを定義しなくて済み、コンポーネントが綺麗になります。

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

export const ExampleComponent = (props) => {
    // こんな感じでstoreにアクセスできる
    const element = useSelector((state) => state.element);

    return (
        <div>
            {element}
        </div>
    );
};

useDispatch

このhookは、コンポーネントにactionを紐づけるためのものです。これを利用することで、コンポーネント外で従来のようにmapDispatchToPropsを定義しなくて済み、コンポーネントが綺麗になります。

import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {clickAction} from '../actions';

export const ExampleComponent = (props) => {
    const element = useSelector((state) => state.element);

    // dispatchの定義
    const dispatch = useDispatch();
    
    // こんな感じでactionを紐づける  
    const handleClick = (e) => {
        dispatch(clickAction());
    };

    return (
        <div onClick={handleClick}>
            {element}
        </div>
    );
};

まとめ

比較的Hooksを適用するのは例と同じ感じで難しくないと思うので、適用できる部分があれば、活用してみましょう。

参考