【React】ReduxとuseReducerのサンプル

2020年5月31日

はじめに

前回はReduxでのステート管理についてでしたが、
今回はuseReducerでのステート管理を試してみました。
比較のためにReduxのコードも載せています。（actionなどは前回記事を参照）

ソースコード

Redux

import React from 'react';

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

const ReducerToRedux = (props) => {
  const samples = useSelector(state => state.samples);
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(setValue('new value'));
  }

  return (
    <div>
      <p>{samples.value}</p>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default ReducerToRedux;

useReducer

Reduxとほとんど同じように使えます。

import React from 'react';

import { setValue } from './actions';
import reducer from './reducers';

const ReducerToHooks = (props) => {
  const [samples, dispatch] = React.useReducer(reducer, { value: 'init value' })

  const handleClick = () => {
    dispatch(setValue('new value'));
  }

  return (
    <div>
      <p>{samples.value}</p>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}

export default ReducerToHooks;

今回はローカルstateの例ですが、useContextと組み合わせる事でグローバルstateの管理もできます。

未分類React

Posted by ababa