私は React を使うときに Redux を使っていたのですが、 その内容を深くは理解していませんでした。
最近 React を使っていないのもあり、難しくなさそうだし（特に何があったわけでもないけど）この機会に Redux を作ってみようと思い、見よう見まねで作ってみました。 作ったのは Vanilla JS 用ですけど。
Redux のソースはほぼ見ていませんので、内容は全然違います。 また、React + Redux しか触ったことがありませんので、本家の Vanilla JS + Redux とは違っていると思います。 型チェックとかも何もしていません。
リポジトリはこちらです。
ソース解説
lib/createStore.js
唯一の Redux 成分。
これがないと始まらない。
combineReducersとかapplyMiddlewareとかそんな高尚なものはありません。
createStoreに作ったReducer配列と初期値を渡してあげることで、Storeが作られます。
src/ActionCreator.js
ただの関数群です。よしなに実装してください。
Store を渡してあげることでdispatchできるようになるので、typeとactionをdispatchします。
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時間くらいでした。 いい勉強になりました。
