ReactNative_javascript スキルでの Redux アーキテクチャの使用の概要

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

この記事では、ReactNative で使用されている Redux アーキテクチャの概要を紹介し、皆さんに共有します。詳細は次のとおりです:

私はしばらくの間 Redux を使用しています。結論は。

なぜ Redux を使うのですか?

背景:

1. RN の状態 (変数、サブコンポーネントは非表示) と props (不変、サブコンポーネントは表示) の設計により、大規模なプロジェクトへの対処が容易になります。状態の混乱により、コンポーネントのレンダリング エラーが発生しました

2. RN は、ターゲット バインディングを必要としない仮想 DOM を使用します -> アクションは、状態が変化する限り、新しい状態のコンポーネントがレンダリングされ、データが変更されます。は一方向に送信され、MVC の デザイン パターン は双方向のデータ フローを持ちます。

3. RN は、非常に便利な模擬テスト方法を提供します。

Redux開発

開発環境

1. Reduxをインストールします: 'npm install –save redux'

2. React NativeとReduxバインディングライブラリをインストールします: npm install –save reverse-redux

3. インストール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 には次の責任があります:

1. アプリケーションの状態を維持する - データベースと同様に、アプリケーションのすべての状態を保存します。

2. getState() メソッドを提供します。現在のすべての状態を取得します。

3. は、状態を更新するためのdispatch(action) メソッドを提供します。これは、状態をデータベースに保存し、状態を変更するアクションを保存することと同じです。

4. 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中文网。

相关推荐：

如何理解 redux

JavaScript技巧中关于react-redux中connect()方法详细解析

在React中使用Redux的实例详解

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