reactフロントエンドフレームdva(三)

API
出力ファイル
dva
デフォルトの出力ファイル.
dva/router
デフォルト出力react-routerインタフェース、react-router-reduxのインタフェースは属性routerReduxで出力されます.
例:

import { Router, Route, routerRedux } from 'dva/router';

dva/fetch
非同期リクエストライブラリは、isomorphic-fetchのインタフェースを出力します.dvaに強くバインドされず、任意のリクエストライブラリを選択できます.
dva/saga
redux-sagaを出力するインタフェースで、主に使用例の作成に使用されます.(使用例ではeffectsが必要)
dva/dynamic
コンポーネントの動的ロードの問題を解決するutilメソッド.
例:

import dynamic from 'dva/dynamic';

const UserPageComponent = dynamic({
  app,
  models: () => [
    import('./models/users'),
  ],
  component: () => import('./routes/UserPage'),
});

optsは、

app:dvaインスタンス、modelsをロードするには

が必要です.

models:Promise配列の関数を返し、Promiseはdva model

を返します.

component:Promiseの関数を返し、PromiseはReact Component

を返します.
dva API app = dva(opts)
アプリケーションを作成し、dvaインスタンスを返します.(注:dvaはマルチインスタンスをサポート)optsは、

history:ルーティング用に指定するhistory、デフォルトはhashHistory

initialState:初期データを指定し、modelのstateより優先度が高く、デフォルトは{}

です.
historyをbrowserHistoryに設定する場合は、次のようにします.

import createHistory from 'history/createBrowserHistory';
const app = dva({
  history: createHistory(),
});

また、使いやすさの観点から、optsにすべてのhooksを割り当てることもでき、以下にすべての割り当て可能な属性を含む.

const app = dva({
  history,
  initialState,
  onError,
  onAction,
  onStateChange,
  onReducer,
  onEffect,
  onHmr,
  extraReducers,
  extraEnhancers,
});

app.use(hooks)
hooksまたは登録プラグインを構成します.(プラグインは最終的にhooksを返します)
例えば、dva-loadingプラグインを登録する例:

import createLoading from 'dva-loading';
...
app.use(createLoading(opts));

hooksは、onError((err, dispatch) => {}) effect実行エラーまたはsubscriptionがdoneを介してアクティブにエラーを投げたときにトリガーされ、グローバルエラー状態を管理するために使用できます.
注意:subscriptionにはtry...catchは加算されていないので、エラーが発生した場合は、2番目のパラメータdoneを介してアクティブに投げ間違えなければなりません.例:

app.model({
  subscriptions: {
    setup({ dispatch }, done) {
      done(e);
    },
  },
});

antdを使用すると、最も簡単なグローバルエラー処理は通常、次のようになります.

import { message } from 'antd';
const app = dva({
  onError(e) {
    message.error(e.message, /* duration */3);
  },
});

onAction(fn | fn[])
actionがdispatchされたときにトリガーされ、reduxミドルウェアを登録するために使用されます.関数または関数配列フォーマットをサポートします.
たとえば、redux-loggerでログを印刷します.

import createLogger from 'redux-logger';
const app = dva({
  onAction: createLogger(opts),
});

onStateChange(fn) stateが変更されるとトリガーされ、stateをlocalStorage、サーバ側などに同期させることができます.onReducer(fn)
パッケージreducer実行.例えばredux-undoによってredo/undoを実現する:

import undoable from 'redux-undo';
const app = dva({
  onReducer: reducer => {
    return (state, action) => {
      const undoOpts = {};
      const newState = undoable(reducer, undoOpts)(state, action);
      //    dva     routing   ，          
      return { ...newState, routing: newState.present.routing };
    },
  },
});

詳細はexamples/count-undoを参照してください.onEffect(fn)
パッケージeffectが実行されます.例えばdva-loadingはこれに基づいてloading状態を自動的に処理する.onHmr(fn)
熱置換相関はbabel−plugin−dva−hmrに現在用いられている.extraReducers
redux-formなどの追加のreducerを指定するには、formの追加のreducerを指定する必要があります.

import { reducer as formReducer } from 'redux-form'
const app = dva({
  extraReducers: {
    form: formReducer,
  },
});

extraEnhancers
redux-persistの使用など、追加のStoreEnhancerを指定します.

import { persistStore, autoRehydrate } from 'redux-persist';
const app = dva({
  extraEnhancers: [autoRehydrate()],
});
persistStore(app._store);

app.model(model)
modelを登録します.詳細は#Modelセクションを参照してください.app.unmodel(namespace)
モデル登録をキャンセルし、reducers、effects、subscriptionsをクリーンアップします.subscriptionはunlisten関数を返さない場合、app.unmodelを使用して警告します.⚠️. app.router(({ history, app }) => RouterConfig)
ルーティングテーブルを登録します.
通常は次のようになります.

import { Router, Route } from 'dva/router';
app.router(({ history }) => {
  return (
    <Router history={history}>
      <Route path="/" component={App} />
    <Router>
  );
});

ルーティング情報を別のファイルに抽出することをお勧めします.babel-plugin-dva-hmrと組み合わせると、ルーティングとコンポーネントのホットロードが実現されます.たとえば、次のようにします.

app.router(require('./router'));

マルチページアプリケーションなどのルーティングを使用しないシーンもあるので、JSX要素を返す関数を入力することもできます.例:

app.router(() => <App />);

app.start(selector?)
アプリケーションを開始します.selectorオプションで、selectorパラメータがない場合、JSX要素を返す関数が返されます.

app.start('#root');

では、いつselectorを追加しませんか?一般的なシーンには、テスト、nodeエンド、react-native、i 18 nの国際化サポートがあります.
例えばreact-intlによって国際化をサポートする例:

import { IntlProvider } from 'react-intl';
...
const App = app.start();
ReactDOM.render(<IntlProvider><App /></IntlProvider>, htmlElement);

Model
modelはdvaの中で最も重要な概念である.次の例を示します.

app.model({
  namespace: 'todo',
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      //       state
      return [...state, todo];
    },
  },
  effects: {
    *save({ payload: todo }, { put, call }) {
      //    saveTodoToServer，      `add` action     state
      yield call(saveTodoToServer, todo);
      yield put({ type: 'add', payload: todo });
    },
  },
  subscriptions: {
    setup({ history, dispatch }) {
      //    history   ，    `/`     `load` action
      return history.listen(({ pathname }) => {
        if (pathname === '/') {
          dispatch({ type: 'load' });
        }
      });
    },
  },
});

Modelには5つのプロパティがあります.
namespace
modelのネーミングスペースは、グローバルstate上のプロパティでもあり、文字列のみで、.による多層ネーミングスペースの作成はサポートされていません.
state
初期値は、dva()に渡されるopts.initialStateよりも優先度が低い.
例:

const app = dva({
  initialState: { count: 1 },
});
app.model({
  namespace: 'count',
  state: 0,
});

このとき、app.start()の後にstate.countは1です.
reducers
key/value形式でreducerを定義します.同期動作を処理するために使用され、stateを変更できる唯一の場所.actionによってトリガーされます.
フォーマットは(state, action) => newStateまたは[(state, action) => newState, enhancer]です.
詳細:https://github.com/dvajs/dva/blob/master/packages/dva-core/test/reducers-test.js
effects
key/value形式でeffectを定義します.非同期オペレーションおよびビジネスロジックを処理するために使用され、stateは直接変更されない.actionによってトリガされ、actionをトリガすることができ、サーバと対話することができ、グローバルstateのデータなどを取得することができる.
フォーマットは*(action, effects) => voidまたは[*(action, effects) => void, { type }]です.
typeタイプは次のとおりです.

takeEvery

takeLatest

throttle

watcher

詳細:https://github.com/dvajs/dva/blob/master/packages/dva-core/test/effects-test.js
subscriptions
key/value形式でsubscriptionを定義します.subscriptionは、データソースを購読し、必要に応じてdispatchに対応するactionを購読するための購読です.app.start()で実行され、データソースは、現在の時間、サーバのwebsocket接続、keyboard入力、geolocation変化、historyルーティング変化などであってもよい.
フォーマットは({ dispatch, history }, done) => unlistenFunctionです.
注:app.unmodel()を使用する場合は、subscriptionは、データ購読をキャンセルするためにunlistenメソッドを返す必要があります.
学習を続け、次の章:reactフロントエンドフレームワークdva(四)