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で作ってるので、型定義も同包してます。