分かりやすいなーと感じた手法の1つがReduxの項目であるAction、Reducer、Storeについて1枚のJSファイルのなかに書いてすすめてくってのがありました。今回この手法で進めてみようと思います。セットアップはCreate-react-appを使ったものです。Reduxとはなんだろうか。library.状態管理がしやすくて一貫性のあるコーディングをサポートするよ。WordPressのフレームワークとは違うからな。みたいな感じでしょうか。Reactとの使用例が多いけどとくにReactに依存したものでもないらしい。Reactでは、react-reduxというのとreduxというライブラリを使ってるのではと思います。今回はreduxだけを使った感じで進めていきます。create-react-appで生成したindex.jsを使って進めます。reduxまずは状態を作ります。JavascriptとKotlinというタスクを持ったアナキン君という設定で。false};つづいてReducerをつくります。Reducerとは"Storeが保持してる状態を変化させる関数。Actionから送られてきた指示を返すかんじでしょうか。state;}}Storeを定義します。アプリ全体の状態とロジックをStoreで集約管理します。createStore(addReducer);ActionCreatorの定義をします。Actionを生成するための関数で、Actionについては、ユーザからの入力とかAPIからの情報取得とかなんらかの状態変化を引き起こす現象を指します。'TO_DARKSIDE',});これで準備できました。今回はReactは使ってないのでConsole.logで状態を見る感じですすめます。今は起こせるアクションを3つもっていて、Storeはアナキンの状態を持っていますね。アクションを起こすときはStoreのDispatchメソッドを使います。addTaskでPerlのタスクを足します。store.dispatch(addTask('Perl'));console.log(store.getState());Chromeとかのデベロッパツールのコンソール画面を見るとこうなってますね。つづいてtDSのアクションを起こします。store.dispatch(tDS());console.log(store.getState());アナキンは暗黒面に落ちてしまいました。ベイダーと名付けましょう。store.dispatch(changeName('ベイダー'));console.log(store.getState());※Perlは黒魔術師が使うというところから引用してます。さっきも書いたけど、今回はReactを使ってない(=Viewがない)んでActionをそのまま叩いてますが、実際はユーザが画面からなんらかのアクションを発生させますよね。回ってるイメージになります。ならない?たぶんなる。いう概念をFluxというらしいです。さっきはConsole.Logを使いましたが、Storeのメソッドにsubscribeというのがあり、Storeの状態が変更されたときに呼び出す関数を作れます。store.subscribe(handleChange);store.dispatch(addTask('Perl'));store.dispatch(tDS());store.dispatch(changeName('ベイダー'));unsubscribe();dispatchが3回はしってて、3回うごいてます。CombineReducerReducer1つではもちろんやっていくのはしんどいので、いくつかあるReducerを合成するReduxがもってるメソッドです。ことで、この辺がだいたいできたらReact-reduxとまぜて、あとファイル構成も分割してやれば理解が深まるんじゃないかとと思います。以下のはコード全部です。Storeが保持してる状態を変化させる関数。アプリ全体の状態とロジックをStoreで集約管理する。Actionを生成するための関数。なんらかの状態変化を引き起こす現象を指す。Takekenインターネット利用者のITリテラシーを向上しようという目的で生まれた、2次元キャラのたけけんです。サーバー弄りからプログラミングまで幅広く書いています。超シンプルにReact-Reduxをまなぶこのサイトはさくらのクラウドで動いています。ntopメール送信のリトライ(再送)について考えてみたビール酵母アレルギーだと!?QEMUでエミューレートするCPUを変えてみようApacheのmod_proxyを使ってみるtcpdumpで中身をみてみよう。Comments【Ubuntu】UbuntuServerをコンソールからデスクトップ画面で操作する。さくらの新スタンダードプランのサーバーにRailsを入れて、Redmineをインストールした。