ひびのログ

日々ではないけどログを出力していくブログ

Redux(っぽいもの)を見よう見まねで実装してみた

私は React を使うときに Redux を使っていたのですが、 その内容を深くは理解していませんでした。

最近 React を使っていないのもあり、難しくなさそうだし(特に何があったわけでもないけど)この機会に Redux を作ってみようと思い、見よう見まねで作ってみました。 作ったのは Vanilla JS 用ですけど。

Redux のソースはほぼ見ていませんので、内容は全然違います。 また、React + Redux しか触ったことがありませんので、本家の Vanilla JS + Redux とは違っていると思います。 型チェックとかも何もしていません。

リポジトリはこちらです。

github.com

ソース解説

lib/createStore.js

唯一の Redux 成分。 これがないと始まらない。 combineReducersとかapplyMiddlewareとかそんな高尚なものはありません。

createStoreに作ったReducer配列と初期値を渡してあげることで、Storeが作られます。

src/ActionCreator.js

ただの関数群です。よしなに実装してください。

Store を渡してあげることでdispatchできるようになるので、typeactiondispatchします。 Middleware を使わない Redux と同様に、非同期処理はここでやればいいと思います。

src/Reducers.js

type``action``stateを受け取って処理をする Reducer の配列です。 これも普通の Redux と変わりません。

src/index.js

つなぎこみ部分です。

まずcreateStoreで Store を取得します。

次にstore.connectで、 View の DOM Element と、それに表示する内容を作る関数を記述します。

そしてリスナーの設定をして終わりです。

最後にrenderしてあげれば初期表示されます。 dispatchすると Reducer が適用された後、勝手に表示されます。

実装してみて

そこまで難しいことはしていないんだなーという印象です。 動くまで2時間、今の形になるまで大体5時間くらいでした。 いい勉強になりました。