【WIP】react-reduxのdocksを使って簡単なメモ帳アプリを作る

今回はreact-reduxのdocksというデザインパターンを使って簡単なメモ帳アプリを作っていきます。

超簡単(一言で)にreact, redux, docksの説明します。

  • react
  • redux
  • docks:
  • react-redux

今回はtodoリストよりシンプルな以下のようなアプリを作っていきます。

各種インストール

まずnode jsがインストールされている

次にReactプロジェクトのテンプレートを作成する

ReduxをReactで使うためのライブラリのインストール

(エラーでひっかかったらsudo付けてみてください)

実装

moduleの作成

docksではaction_type,action_creater,reducer をmoduleという単位で扱います。

今回はメモに関するaction_type,action_creater,reducerをここにいれます。

では、moduleを作っていきます。

ディレクトリを作成します。

moduleの中に

action_createrでは, actionの名前やactionに必要な情報が格納されている
オブジェクトを生成します。

reducerは受け取ったstateとactionを使って新しいstateを生成します。

reducerはdispatchされた場合にその処理を行います。

次にmodule/index.jsを以下のように作ります。

をつくります。
module/index.jsを作ることによって
外部からmoduleをimportする場合にindex.jsにexportされたモジュールを取得します。

containers, compornentsの作成

次にcontainersとcompornentsを作成します。
まずはディレクトリを作成しておきます。

ファイルをどんどん書いていきます。
(ちなみにデフォルトではsrc/App.jsとなっていますが消すか、このディレクトリに移動してください)
src/compornents/App.js

srs/compornents/Form.js

srs/compornents/Memo.js

srs/compornents/MemoList.js

containersも同様に

src/containers/VisibleMemoList.js

最後にsrc/index.js

タイトルとURLをコピーしました