js + redux + npm + webpack setting

TOC

n/a.環境

じょうたいこうぞうのへんか

react=JSなので、JSが分かればreactがわかります.
まず環境を見てみましょう
準備物
JS, webpack, node, npm(redux)
上記準備物の環境と相互接続の方法は前の文章に整理されている.
現在、npmからredoxを取得し、実際に使用しています.

import { createStore, getState } from 'redux';

const Reducer = (state, action) => {
  if (state === undefined) {
    return { color: 'skyBlue' };
  }
};
const store = createStore(Reducer);

console.log(store.getState()); // expected: skyblue

Reduxはstateを含むstoreを作成し、stateを含む.
storeはgetStateからコピーを要求され、store内部の状態を返します.
したがって、getStateリクエストによって受信されたstate値はstoreに関係なく独立した値となり、storeに変更されます.stateには何の影響もありません.

じょうたいこうぞうのへんか

現在市場で最も多く使われているstate構造は3つに分けられています
本来redoxはReactのために作成されておりcontext APIと似ているが,より大きなアプリケーションの管理に適していると考えられる.

MVC

MVC modle-view-controllerの構成は以下の通りである.

これは基本的なreactのstate管理構造であり,ビュー側のactionとモデルが相互作用してstateを変更する.
これは,単純な構造のアプリケーションでは開発者が管理できるが,状態の汚染やアプリケーションの増大に伴い,修正が必要な状態接続の状態の管理が複雑になり,モジュール化が困難になることを意味する.

Flux & single store

最大の違いは、トラフィックに複数のストレージがあることです.
stateを保管しているStoreは複数です.
Reduxには別のリポジトリがあり、可変な状態を保証できます.
reduceにはステータス変更があり、各モジュールはステータスが必要な場合にクローン化されて書き込まれるため、storeのステータスは変更されません.