この記事はReactNativeで使われているReduxアーキテクチャの概要を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。 .NET に興味のあるお友達は、ぜひ編集者をフォローしてご覧ください
この記事では、ReactNative で使用されている Redux アーキテクチャの概要を紹介し、皆さんと共有します。詳細は次のとおりです:
私はしばらくの間 Redux を使用しています。結論は。
なぜ Redux を使うのですか?
背景:
RN の状態 (変数、サブコンポーネントは非表示) と props (不変、サブコンポーネントは表示) の設計により、大規模なプロジェクトへの対処が容易になります。状態の混乱により、コンポーネントのレンダリング エラーが発生しました
RN は、ターゲット バインディングを必要としない仮想 DOM を使用します -> アクションは、状態が変化する限り、新しい状態のコンポーネントがレンダリングされ、データが変更されます。は一方向に送信され、MVC デザイン パターンには双方向のデータ フローがあります。
RN は、非常に便利な模擬テスト方法を提供します。
Redux開発
開発環境
Reduxをインストールします: 'npm install –save redux'
React NativeとReduxバインディングライブラリをインストールします: npm install –save reverse-redux
インストールRedux Thunk 非同期アクション ミドルウェア: npm install –save redux-thunk
3 つの原則
単一のデータ ソース
アプリケーション全体の状態はオブジェクト ツリーに保存され、オブジェクト ツリーは存在します唯一の店舗で。ストア内の状態はコンポーネントにバインドされています
状態は読み取り専用です
状態を変更する唯一の方法は、アクションをトリガーすることです。 action は、イベントを定数として表すことができる type 属性を含む通常の JS オブジェクトです。
純粋関数を使用して変更を実行します
対応するアクションが状態を変更する方法を記述するためにリデューサーを作成します。一般に、switch(action.type) を使用すると副作用なく処理できます
使用してください
react-redux は接続とプロバイダーを提供します。
1.Provider は最上位の配布ポイントであり、その属性は Store であり、接続されているすべてのコンポーネントに State を配布します
2.connect: 2 つのパラメーターを受け入れます: 1 つは、mapStateToProps または mapDispatchToProps で、もう 1 つはコンポーネント自体です縛られること。
Store
StoreはReducerとActionを繋ぐオブジェクトです。 Store には次の責任があります:
アプリケーションの状態を維持する - データベースと同様に、アプリケーションのすべての状態を保存します。
getState() メソッドを提供します。現在のすべての状態を取得します。
は、状態を更新するためのdispatch(action) メソッドを提供します。これは、状態をデータベースに保存し、状態を変更するアクションを保存することと同じです。
subscribe(listener)からリスナーを登録します。
Store は本質的に、アプリケーション全体の状態をツリー形式で保存するオブジェクトです。そしていくつかの方法を提供します。たとえば、getState() やdispatch() などです。
Redux アプリケーションにはストアが 1 つだけあります。
Storeは、アプリケーション全体のルートReducerの初期状態に基づいて、createStoreメソッドを通じて作成されます。
コードは次のとおりです:
import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk';//异步 import reducers from './reducers'; const Store = applyMiddleware(thunk)(createStore)(reducers); export default Store;
Reducers
Actionは、何かが起こったという事実のみを記述し、アプリケーションが状態を更新する方法を指定しません。これが減速機の役割です。
Reducer の本質は関数であり、純粋な関数です。副作用はありません。簡単に言うと、Reducer は、受け取ったアクションと状態に基づいてストア内の状態を変更するという 1 つのことだけを実行します。
(state, action) => newState
は通常、switch(action) を通じて実装されます。 .type) を使用してさまざまなアクションを決定します。デフォルトは古い状態です。初期状態も定義できます。
コード:
import { combineReducers } from 'redux'; const newState = (state = {}, action = {}) => { switch (action.type) { case ActionTypes.CSTATE: return { ...state, ...action.state }; case '_DPDATACHANGE_': return {...state, ...action.dpState}; default: return state; } }; //Reducer 合并 export default combineReducers({ newState, });
注: 古い状態値の一部を保持する必要がある場合は、...state (対応する ES7 オブジェクト拡張構文) を使用します。オブジェクトのプロパティは浅くコピーされます。ここでは Object.assign({}, state, newState)) と同等です。状態をマージする場合、1 つのレイヤーのみがマージされ、複雑な状態は手動でマージする必要があります。
Action
Action は、イベントを表す少なくとも 1 つの type 属性を含む通常の JS オブジェクトであり、他の属性はデータを渡すために使用できます。実際には、プロセスに対して関数が定義され、プロセスにはネットワーク リクエストが含まれ、最終的にアクションを返します。この関数はアクション クリエーターと呼ばれます。
コード: ストアはこのアクションをディスパッチできます。アクションのタイプは識別子を表し、状態はそれが運ぶデータです。
export const newState = state => { Store.dispatch({ type: ActionTypes.CSTATE, state, }); };
永続性
アクションがトリガーされると、データはリデューサーキーに従って復元され、その後、アクションはアプリケーションの起動時にのみ配布される必要があります。これも簡単に抽象化できます。実際、サードパーティのライブラリ redux-persist がこれらすべてを行ってくれます。
アクションのコードは次のようになります:
export const getStorage = async (key) => { const d = await AsyncStorage.getItem(key); return JSON.parse(d); }; export const setStorage = (key, value) => { AsyncStorage.setItem(key, JSON.stringify(value)); };
connect
By - getState() メソッドを提供します。現在の状態をすべて取得します
通过connect,绑定需要的state以及Action Creator到你的组件的props上,这样组件就可以通过props来调用Action Creator,或者根据不同props来render()不同的组件。
代码:
mapStateToProps({ newState }) { const value = newState[name];//name: newState.name return { name, }; },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHP中文网。
相关推荐:
JavaScript技巧中关于react-redux中connect()方法详细解析
以上が.NET Core クラス ライブラリの EF Core を使用してデータベースを SQL Server に移行する方法_実践的なヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。