abcdefGets

ゲッツ!

React hooks for React-Redux

久しぶりに時間が少しあったので、今更ながらReact hooksで遊んでみた。

Redux

とりあえず、useReducerとか触ってみたけど、redux勢には物足りない感... reduxをReact hooksで使えるやつ探したらfacebookが出してるredux-react-hookを見つけた。 使ってるうちに、こんな仰々しいものじゃなくていいんだよなという思いが拭えず...

結局React Hooksの勉強がてら全てをhooksでこなすrrhというYet another redux-hookを作ってみた。

RRH

使い方は簡単でcreateStoreをhookにした感じ

Provider側

import React from 'react';
import { useProvider } from 'rrh';
import reducer from './reducer';
import middleware from './middleware'
import Child from './child';

const Component = () => {
  const Provider = useProvider(() => ({
    reducer,
    preloadedState: {count: 1},
    storeEnhancer: applyMiddleware(middleware)
  }));

  return <Provider><Child></Provider>
}

connectもhookにしてみた

import React from 'react';
import { useSelector } from 'rrh';

const Child = (props) => {
  const selected = useSelector(
    props,
    (dispatch, props) => ({
      increment: () => dispatch({type: 'INCREMENT', payload: 1}),
      decrement: () => dispatch({type: 'DECREMENT', payload: -1}),
    }),
    (state, props) => ({count: state.count}),
    state => [state.count]
  );

  return (
    <div>
      {selected.count}
      <button onClick={selected.increment}>INC</button>
      <button onClick={selected.decrement}>DEC</button>
    </div>
  )
}

使い勝手は素のreduxに近くなるようにしてみた。

typescript

tsで作ってるので、型定義も同包してます。

rrh https://github.com/brn/rrh