55[ Redux] [ ] はJavaScriptアプリケーションのStateを管理するライブラリで、
66[ React] ( https://github.com/facebook/react " React ") などと組み合わせアプリケーションを作成するために利用されています。
77
8- Reduxは[ Flux] ( https://facebook.github.io/flux/ " Flux ") アーキテクチャに類似する仕組みであるため、事前にFluxについて学習していると良いです。
8+ Reduxは[ Flux] ( https://facebook.github.io/flux/ " Flux ") アーキテクチャに類似する仕組みです。
9+ そのため、事前にFluxについて学習していると良いです。
910
1011Reduxには[ Three Principles] ( http://redux.js.org/docs/introduction/ThreePrinciples.html " Three Principles | Redux ") (以下、三原則)と呼ばれる3つの制約の上で成立しています。
1112
1213- Single source of truth
13- - アプリケーション全体のStateは一つのStateツリーとして保存される
14+ - アプリケーション全体のStateは1つのStateツリーとして保存される
1415- State is read-only
1516 - StateはActionを経由しないと書き換えることができない
1617- Changes are made with pure functions
@@ -28,10 +29,12 @@ _Middleware_ という名前からも分かるように、[connect](../connect/R
2829
2930## どう書ける?
3031
31- 3行でReduxの仕組みを書くと以下のようになります 。
32+ 簡潔にReduxの仕組みを書くと以下のようになります 。
3233
33- - 操作を表現するオブジェクトをActionと呼ぶ - 一般にコマンドパターンのコマンドと同様のもの
34- - Actionを受け取りStateを書き換える関数を _ Reducer_ と呼ぶ - ReducerはStoreに事前に登録する
34+ - 操作を表現するオブジェクトをActionと呼ぶ
35+ - 一般的なコマンドパターンのコマンドと同様のもの
36+ - Actionを受け取りStateを書き換える関数を _ Reducer_ と呼ぶ
37+ - ReducerはStoreへ事前に登録する
3538- ActionをDispatch(` store.dispatch(action) ` )することで、ActionをReducerへ通知する
3639
3740Reduxの例として次のようなコードを見てみます。
@@ -48,9 +51,11 @@ Reduxの例として次のようなコードを見てみます。
4851
4952上記の処理のうち、 3から4の間が _ Middleware_ が処理する場所となっています。
5053
51- ` dispatch(action) ` -> (_ Middleware_ の処理) -> reducerにより新しいStateの作成 -> (Stateが変わったら) -> ` subscribe ` で登録したコールバックを呼ぶ
54+ ```
55+ dispatch(action) -> (_Middleware_ の処理) -> reducerにより新しいStateの作成 -> (Stateが変わったら) -> subscribeで登録したコールバックを呼ぶ
56+ ```
5257
53- 次は _ Middleware_ はどういう拡張を行えるのかを見ていきます 。
58+ 次は _ Middleware_ によりどのような拡張ができるのかを見ていきます 。
5459
5560## Middleware
5661
@@ -73,8 +78,8 @@ const createStoreWithMiddleware = applyMiddleware(createLogger())(createStore);
7378この時、見た目上は ` store ` に対して _ Middleware_ が適用されているように見えますが、
7479実際には` store.dispatch ` に対して適用され、拡張された` dispatch ` メソッドが作成されています。
7580
76- これにより、以下のように ` dispatch ` を実行する際に _ Middleware_ の処理が実行されてから、
77- 実際に ` dispatch ` されるというのがReduxの _ Middleware_ による拡張のポイントになっています 。
81+ これにより、` dispatch ` を実行する際に _ Middleware_ の処理を挟む事ができます。
82+ これがReduxの _ Middleware_ による拡張ポイントになっています 。
7883
7984``` js
8085store .dispatch ({
@@ -83,7 +88,7 @@ store.dispatch({
8388});
8489```
8590
86- さきほどの ` logger.js ` を見てみます 。
91+ 先ほどの ` logger.js ` をもう一度見てみます 。
8792
8893``` js
8994export default function createLogger (options = defaultOptions ) {
@@ -119,7 +124,7 @@ const middleware = (store) => {
119124
120125ただ単に関数を返す関数(高階関数)を作っているだけだと分かります。
121126
122- これを踏まえて logger.js をもう一度見てみると、` next(action) ` の前後にログ表示を挟んでいることが分かります。
127+ これを踏まえて` logger.js ` をもう一度見てみると、` next(action) ` の前後にログ表示を挟んでいることが分かります。
123128
124129[ import, logger.js] ( ../../src/Redux/logger.js )
125130
@@ -135,26 +140,25 @@ const middleware = (store) => {
135140
136141## 実装してみよう
137142
138- - [ ] TODO
139143- [ ] DispatcherベースのMiddleware
140144
141145## どういう事に向いてる?
142146
143- - [ ] TODO
144147- アスペクト的に前後に処理を挟むことができる
145148 - ログへの利用
146- - 値自体は直接操作するわけではないが、受取るデータは変換できる
149+ - 値自体は直接操作できない
150+ - 受取るデータは変換できる
147151
148152## どういう事に向いていない?
149153
150154- [ ] TODO
151155- 変換の仕組み上、書き換え等を行うプラグインを扱いにくい
152156
153- ## この仕組みを使ってるもの
157+ ## この仕組みを使っているもの
154158
155159- Connectに似ている
156- - _ Middleware_もStateそのものを直接書き換える事はできません。
157- - この部分が類似の仕組みを持つ[ connect] ( ../connect/README.md ) との違いになっています。
160+ - _ Middleware_もStateそのものを直接書き換える事はできません
161+ - この部分が類似の仕組みを持つ[ connect] ( ../connect/README.md ) との違いになっています
158162
159163
160164
0 commit comments