ReactNative で Redux アーキテクチャを使用する方法-jsチュートリアル-php.cn

ReactNative で Redux アーキテクチャを使用する方法

亚连

リリース： 2018-06-20 16:23:30

オリジナル

1498 人が閲覧しました

この記事はReactNativeで使われているReduxアーキテクチャの概要を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。編集者をフォローして見てみましょう

この記事では、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 を配布します。縛られること。

Store

StoreはReducerとActionを繋ぐオブジェクトです。 Store には次の責任があります:

Redux アプリケーションにはストアが 1 つだけあります。

Storeは、アプリケーション全体のルートReducerの初期状態に基づいて、createStoreメソッドを通じて作成されます。

コードは次のとおりです:

import { createStore, applyMiddleware } from &#39;redux&#39;;
import thunk from &#39;redux-thunk&#39;;//异步
import reducers from &#39;./reducers&#39;;
const Store = applyMiddleware(thunk)(createStore)(reducers);
export default Store;

ログイン後にコピー

Reducers

Action は、何かが起こったという事実のみを記述し、アプリケーションが状態を更新する方法を指定しません。これが減速機の役割です。

Reducer の本質は関数であり、純粋な関数です。副作用はありません。簡単に言うと、Reducer は 1 つのことだけを実行します。それは、受け取ったアクションと状態に基づいてストア内の状態を変更することです:

(state, action) => newState

通常、実装されると、 switch(action.type ) を使用してさまざまなアクションを決定します。デフォルトは古い状態です。初期状態も定義できます。

コード:

import { combineReducers } from &#39;redux&#39;;
const newState = (state = {}, action = {}) => {
 switch (action.type) {
  case ActionTypes.CSTATE:
   return { ...state, ...action.state };
  case &#39;_DPDATACHANGE_&#39;:
   return {...state, ...action.dpState};
  default:
   return state;
 }
};
//Reducer 合并
export default combineReducers({
 newState,
});

ログイン後にコピー

注: 返されるのは新しい状態です。古い状態値の一部を保持する必要がある場合は、...state (ES7 オブジェクト拡張構文、オブジェクトの対応するプロパティが浅くコピーされます) を使用します。、ここでは Object.assign({ }, state, newState)) と同等であり、状態をマージする場合、1 つのレイヤーのみがマージされ、複雑な状態は手動でマージする必要があります。

Action

Action は、イベントを表す少なくとも 1 つの type 属性を含む通常の JS オブジェクトであり、他の属性はデータを渡すために使用できます。実際には、プロセスに対して関数が定義され、プロセスにはネットワーク要求が含まれ、最終的にアクションを返すことができます。この関数はアクションクリエーターと呼ばれます。

コード: Store はこのアクションをディスパッチできます。アクションのタイプは識別子を表し、状態はそれが運ぶデータです。

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() メソッドを提供します。現在の状態をすべて取得します

接続を通じて、必要な状態とアクションクリエーターをコンポーネントのプロップにバインドします。これにより、コンポーネントはプロップを通じてアクションクリエーターを呼び出したり、異なるプロップに基づいて異なるコンポーネントを render() したりできるようになります。

コード:

mapStateToProps({ newState }) {
      const value = newState[name];//name: newState.name
      return {
       name,
      };
     },

ログイン後にコピー

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

Angularで非表示の表示を実装する方法

Angularで機密テキストプロンプトを実装する方法

AngularでorderByソートとファジークエリを実装する方法

JavaScriptでキーボードのキーコードを取得する方法

vue vuex vue-rouert パーミッションルーティング (詳細なチュートリアル)

以上がReactNative で Redux アーキテクチャを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。