この記事はReact #1 Advent Calendar 2017の5日目です。 はじめに 私はなんとなくReduxが好きなのですが、 初めて手を出した時はreact-reduxのボイラープレートやディレクトリ構成やstore、Provider、middlewareのセットアップなど初見ではどれも意味不明で、最初はReact専用のフレームワークだと思っていました。 しかしソースコードを読んでみるとRedux自体は実装にflowもTypeScriptも使っていない非常に小さなJSライブラリに過ぎず、Reactとは独立した存在であることが分かりました。 ここではreact-reduxや他のJSフレームワークの事を一旦忘れてVanilla JSでReduxを動かし、純粋にReduxの動作原理について学んでみたいと思います。 FluxアーキテクチャとRedux1 ReduxはFluxアーキテクチ
![Vanilla JSで学ぶRedux - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbd7a1c61a88a4a8942779c87518451f71f824b2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTM4MCZ0eHQ2ND1WbUZ1YVd4c1lTQktVLU9CcC1XdHB1T0J0bEpsWkhWNCZ0eHQtY29sb3I9JTIzMzMzJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU0JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1jZW50ZXIlMkNtaWRkbGUmcz1hYjFiOTNiNWU2YmY2NGRkYzBjM2UzYjQyNjUwODNlNg%26mark-align%3Dcenter%252Cmiddle%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTUwMCZ0eHQ2ND1RSEo1YjNSaExXMTFjbUZyWVcxcCZ0eHQtY29sb3I9JTIzMzMzJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTQ1JnR4dC1hbGlnbj1yaWdodCUyQ2JvdHRvbSZzPTc5MDkwYjI4MWYzZGY0ZmYzZTk3YWRmY2EzZTIzOTZl%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3D7fcc89e2998bd1b1787f35a065a9ea24)