reduxによって生き生きとされることは、単に福音です。それはあまりにもシンプルでエレガントです。大いに賞賛されます！ ！ ！

ところで、今日、外国人が誤ってツイッターに再投稿したのを見て、外国人が書いたと思ったのですが、Alipayの同級生になるとは思っていませんでした👍

効果の拡大を楽しみにしています

Alipayの本番環境はこのアーキテクチャを使用していますか？

@besteric dvaがリリースされたばかりで、まだ適用されていませんが、その背後にあるアプリケーションアーキテクチャはしばらくの間使用されています。

レデューサーは次のように書くことができます：

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

これにより、いくつかの高次の方法をレデューサーに適用することが可能になります。

賞賛、私はいくつかのデモを書きました、そしてただ一つの問題があります、モデルは使用することができるだけです
app.model(Model1); app.model(Model2);
組み合わせを完成させるのはこの方法ですか、実際、理想は
app.model([Model1,Model2])
ある種の

コンポーネント間でディスパッチを渡すのは面倒です。次の解決策を検討してください

bindActionCreatorsを使用しないのですか？

@yesmeckレデューサーの高度な使用法の特定のシナリオはredo/undoだけですか？dvaの柔軟性を高めたくないので、将来的にアドオンを介して追加することを検討します。

プロジェクトでは多くのことを使用します。たとえば、複数のレデューサーの類似部分を高レベルのメソッドに抽出して元のレデューサーを変更します。また、ルート時にレデューサーが状態をリセットできるようにする高レベルのメソッドがあります。変更。、およびこのhttps://github.com/erikras/multireducer

@ Tinker404モデルを個別に宣言する方が明確であり、追加と削除が簡単になると思います。私はこれを書きます：

app.model(require('../models/a'));
app.model(require('../models/b'));

@JimmyLvは、個人的にactionCreatorを使用せず、 dispatchのみを使用することを好みます。

@yesmeckわかりました、もう一度考えます。

ルートが変更されたときにレデューサーが状態をリセットできるようにする高次の方法もあります

このシナリオは、 subscriptionsでルーティングの変更をサブスクライブし、アクションによって状態をリセットすることで、より適切だと思います。または、レデューサーエンハンサー法を使用することに利点はありますか？

このシナリオは、サブスクリプションのルーティング変更をサブスクライブしてから、アクションを通じて状態をリセットすることで、より適切だと思います。

この場合、リセットする必要のある各レデューサーは、リセットロジックを作成する必要があります。高レベルのメソッドを使用する場合は、次の手順を実行するだけで済みます。

combineReducers({
  products: composeReducers({  // composeReducers 的实现见下面
    recycle(LOCATION_CHANGE, initialState),  // recycle 用来在路由变化时重置状态
    products
  })
})

別のシナリオは、私がさまざまなレデューサーを抽出することについて話しているのと同じロジックです。たとえば、製品のリストとユーザーのリストがあり、それらのレデューサーは次のようになります。

// reducers/products.js
const reducer = (state, { type, action}) => {
  switch (type) {
    case 'products/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

// reducers/users.js
const reducer = (state, { type, payload}) => {
  switch (type) {
    case 'users/FETCH_SUCCESS':
      return {
        ...state,
        loading: false,
        list: payload
      }
    default:
      return state
  }
}

ここでは、2つのレデューサーはほぼ同じなので、それを抽出してリストレデューサーを作成します。

const list = (actionType) => {
  return (state, { type, payload }) => {
    switch (type) {
      case actionType:
        return {
          ...state,
          loading: false,
          list: payload
        }
        break;
      default:
        return state
    }
  }
}

次に、 composeReducersを実装して、これら3つのレデューサーを組み合わせます。

function composeReducers(...reducers) {
  return (state, action) => {
    if (reducers.length === 0) {
      return state
    }

    const last = reducers[reducers.length - 1]
    const rest = reducers.slice(0, -1)

    return rest.reduceRight((enhanced, reducer) => reducer(enhanced, action), last(state, action))
  }
}

このようにして、製品リストとユーザーリストのレデューサーは次のようになります。

// reducers/products.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('products/FETCH_SUCCESS'))

// reducers/users.js
const reducer = (state, { type, payload}) => {
  // 其他逻辑
}

export default composeReducer(reducer, list('users/FETCH_SUCCESS'))

リストは単なる例であり、実際、プロジェクトには同じロジックを持つ多くのレデューサーがあります。

@yesmeck👍 、レデューサーエンハンサーの役割は以前は過小評価されていました。

@sorryccなぜあなたは言うことができますか？ dispatch比較で明示的に呼び出されましたか？

@ Tinker404モデルを個別に宣言する方が明確であり、追加と削除が簡単になると思います。私はこれを書きます：
app.model（require（'../ models / a'））;
app.model（require（'../ models / b'））;

また、一度に複数のモデルを渡すことができる方法を提案します。大規模なプロジェクトには多くのモデルが含まれる場合があります。現在、すべてのモデルをインポート（インポート）してから、各モデルを1つずつモデル化する必要があります。これはあまり便利ではありません。現在の方法執筆の：

// models是个文件夹，有很多model
import models from './models';

models.forEach((m)=>{
    app.model(m);
});

// models.js
const context = require.context('./', false, /\.js$/);
const keys = context.keys().filter(item => item !== './index.js');
const models = [];
for (let i = 0; i < keys.length; i++) {
  models.push(context(keys[i]));
}
export default models;

とてもD.VAです。

ユーザーダッシュボードでantdフォームコンポーネントの使用を見つけましたが、純粋なコンポーネントには使用できないことを覚えていますが、今は可能ですか？

@codering制限があることを覚えていませんが、antdの問題はhttps://github.com/ant-design/ant-design/issuesで尋ねることができます。

https://github.com/react-component/form/blob/master/README.md
注に記載されています。

こんにちは、あなたのdvaを使用したいと思います。現在、React Webpack Reduxスキャフォールディングによって生成されたディレクトリ構造を使用しています。例のユーザーダッシュボードの例を参照してコードを変更しましたが、開始後に何もありません。私はそれがどこにあるかを見つけますか？何かがうまくいかなかった、私のプロジェクトアドレス： https ：//github.com/baiyulong/lenovo_parts

@baiyulongユーザーダッシュボードのディレクトリ構造に基づいて直接実行してみませんか？

@sorrycc現在、ユーザーダッシュボードのディレクトリ構造を使用しています。dvaルーティングに特別な処理や書き込みはありますか？
export default function({ history }) {
return (
<Router history={history}>
<IndexRoute component={HomePage} />
<Route path='/' component={HomePage}>
<Route path='/create' component={CreateOrder} />
</Route>
</Router>
)
}
私が書いたこのルート、ホームページはできます、私は<Link to='/create'>Create</Link>リンクを書きました、それをクリックした後にCreateOrderコンポーネントに行くことができません

@baiyulongdvaのルートを書く特別な方法はありません。試してみてください。

1. エラーはありますか
2. /createルートに直接アクセスしてみてください

@nikoguどうもありがとう、入れ子になった後は元気になります

こんにちは、dvaはモデルのホットローディングをサポートできますか？

@ kkkf1190はこれを検討しており、サポートする予定です。

👍

ありがとうと言いたかっただけです。 。 。

vuejsのvue-cliの足場はとても良いといつも思っていましたが、これを読んだ後、私の考え方は一変しました。

とても素敵なフレーム！しばらく研究してきました。 @sorryccYundaに2つの質問をしたいと思います。

1. dvaはreactnativeプロジェクトで完全に使用できますか？
2. dva + reactjsはサーバー側のレンダリングをうまくサポートできますか？

@ freemember007

1. react-nativeのサポート、参照例： https ://github.com/sorrycc/dva-example-react-native
2. 理論的にはサーバーの動作に問題はありません。その背後にあるreduxとreact-routerはどちらもSSRをサポートしていますが、関連するロジックをまっすぐにして適切にパッケージ化する必要があるため、dvaに適用するには時間がかかります。

@sorrycc高階レデューサーをサポートするためのソリューションはありますか？私たちのプロジェクトは、再利用のために多くの高次レデューサーを使用しています

@ancheelでサポートされており、グローバルまたはローカルにすることができます。ユースケースを参照してください： https ：//github.com/dvajs/dva/blob/master/test/reducers-test.js

モデルの状態を変更した後、モデルを再度変更する方法、この問題は常に発生します
antd.js：32924警告：setState（...）：既存の状態遷移中（ renderまたは別のコンポーネントのコンストラクター内など）は更新できません。Renderメソッドは、propsとstate;コンストラクターの純粋関数である必要があります。副作用はアンチパターンですが、 componentWillMountに移動できます。

非常にエキサイティングです。本番環境で使用してみてください。引き続き最適化と改善を行ってください。

これを弱体化！

よくやった。ありがとう！！

@sorryccサーバーサイドレンダリングのサポートを楽しみにしています！

@mountainmoonによってサポートされています。https： //github.com/sorrycc/dva-boilerplate-isomorphicを参照してください。

車輪の波が来ました：+1：

こんにちは、私はこのdvaの学習について連絡を取りました。数日間コードを読んだ後、心の中でいくつか質問があります。質問したいのですが。
あなたのデモはすべてシングルページアプリケーションであることがわかりましたが、それらはすべて開発中のマルチページアプリケーションです。マルチページアプリケーション開発でルーティングが使用されていない場合、代わりにコンポーネントをロードする方法を尋ねたいと思います。馬鹿に尋ねる。ルーティングを使用しないため、少し混乱します。そのため、モデルに設定されているリスナーは、トリガーする場所が明確ではありません。
history.listen（location => {
if（location.pathname ==='/ users'）{
急送（{
タイプ：'querySuccess'、
ペイロード：{}
}）
}
}）
PS：querySuccessメソッドでデータをロードし、export default connect（mapStateToProps）（Users）;を使用すると、エラーも報告されます。
connect.js：41 Uncaught TypeError：クラスを関数として呼び出すことはできません
一瞬バカみたいな感じで、説明してもらえるかわからない、ありがとう！

なぜdva？ 英語でお願いします

私はこの書き方が本当に好きではありません。

@coderingは、ユーザーダッシュボードでのantdフォームコンポーネントの使用について言及しましたが、純粋なコンポーネントには使用できないことを覚えています。今は可能ですか？
私もこれに最も遭遇しました。純粋関数コンポーネントの場合、getFieldDecorator関数はprops.form.getFieldDecoratorから取得できません。extendsを使用してコンポーネントを作成すると、取得できます。
神が解決策を持っているかどうかはわかりません@sorrycc

同じページを英語で立ち上げていただけませんか？ これを理解することはできません。なぜdvaが必要なのですか。

こんにちは、大規模なプロジェクトの場合、その状態は非常に大きく、処理が非常に面倒になります。複数のモデルに分割する必要がありますか？

@ yazhou-zyz私はあなたと同じ問題を抱えています：
警告：setState（...）：既存の状態遷移中（renderまたは別のコンポーネントのコンストラクター内など）は更新できません。renderメソッドはpropsとstateの純粋関数である必要があります。コンストラクターの副作用はアンチパターンですが、 componentWillMountに移動できます。
どうやって解決したのか聞いてみますか？

学び

勉強し続ける

dvaは、建設プロジェクトにとって非常に参考になる価値があります。

お疲れ様でした〜

英語のドキュメントはどこにありますか？ 翻訳エンジンを使用してトピックを翻訳することには問題があり、理解が十分ではありません。 英語で、あなたたちは世界に到達することができます。 頑張ってください!! ：ロケット：

dvaはReact-native0.47.XおよびReact16.0.0バージョンでは試されません

@vecoldは、招待コードやエラーメッセージは使用できないと言って、常に使用できます。

ドキュメントの英語翻訳を入手できる可能性はありますか？
ありがとう！

ビジネスコードでは、このような例が一般的です。ローカル状態の更新は全体に影響を与える可能性があります。再レンダリングする必要のない多くの場所も再レンダリングされるため、ページのパフォーマンスが大幅に低下します。この関数を追加して、redux connectが依存している状態を自動的に分析し、不要なmapStateToPropsの計算を減らして再レンダリングすることはできますか？👍

とても良い
しかし、単一のページを作成したい場合は、すべてのページを作成します

_非公式翻訳_

なぜDva？

Reduxは良いです。 しかし、概念が多すぎて、レデューサー、サガ、アクションが分離されています（異なるファイルに分割されています）

1. レデューサー、セージ、アクションを頻繁に切り替える必要があります
2. ビジネスモデル（またはドメインモデル）を整理するのに不便。 exp。の場合、すでにuser_listがあり、product_listが必要な場合は、ファイルのコピーを複製する必要があります
3. 佐賀は書くのが難しいです。 すべてのアクションに対して、フォーク->ウォッチャー->ワーカーを作成する必要があります。
4. エントリーは退屈で複雑です

Dvaとは何ですか？

これは、既存のフレームワーク（redux + react-router + redux-saga ...）のライトラッパーです。 新しい概念は含まれていません。 <100行のコード。 （elmとchooに触発されました。）

これはフレームワークであり、ライブラリではありません。 Ember.jsと同様に、各部分の記述方法を制限します。 チームワークをより制御しやすくなります。 Dvaは、reactとreact-domを除くすべての依存関係をpeerDependenciesとしてカプセル化します

その実装は、可能な限り新しい構文を導入しません。 依存関係を再利用します。 たとえば、ルーターの定義は、react-routerのJSXとまったく同じです。

コア機能はapp.modelです。 これは、reducer、initialState、action、sagaを完全にカプセル化します。

app.model({
  namespace: 'products',
  state: {
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});
    },
  ],
  effects: {
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

以前はsagas/products.js, reducers/products.js actions/products.jsを作成し、それらを切り替えていました。

キーポイント：

• 名前空間： rootReducerオブジェクト内のreducerのkey $
• 状態： initialState reducer
• サブスクリプション：domの準備ができたときに実行される[email protected]の新しい概念： FRPへの別れ
• 効果：より簡単な賢人
• レデューサー

使い方

例を見る

ロードマップ

• devtoolホットリロード
• ルーターの動的構成
• Effectsはより多くのsagaモデルをサポートします
• 単体テスト
• その他の例：todolist、antd-initのユーザー、人気のある製品

よくある質問

開発ツールはサポートしますか？

redux-devtool、csslivereloadと互換性があります。 ホットリロードにはさらに作業が必要です

prod envに適していますか？

承知しました

redux + redux-sagaのすべての機能を含みますか？

はい

ブラウザの互換性？

redux-sagaのためIE8はありません。 （後で、エフェクトレイヤーの拡張機能として観察可能なサンク、プロミスを適用する場合があります）

同様にしてください

['products/query']: function*() {}
['products/query'](state) {}

構文は何ですか？配列を関数名として使用できますか？

@clemTheDasher関数名は、JavaScriptで計算されたキー（配列ではない）にすることができます。 メソッド定義へのより詳細な参照|

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // compare getter/setter syntax:
  get property() {},
  set property(value) {}
};

新規参入者の報告、ここに来て、フロントエンドの知識を学ぶために懸命に働き続けます

@clemTheDasherそれは計算されたプロパティです。

リンクhttps://github.com/dvajs/dva/tree/master/examples/count404はなぜですか？

学び！

神を見上げる

神に感謝します、オープンソースに感謝します

私はあなたたちから学ぶことを許されていませんか！

私は学びました、私たちが使用するためのそのような便利なフレームワークを持っていることに感謝します

githubのデモリンクの有効期限が切れています。

@sorrycc dvaはサーバー側のレンダリングをサポートしていますか？

レデューサーは次のように書くことができます：

const reducer = (state, { type, payload }) => {
  switch (type) {
    case 'products/query':
      return { ...state, loading: true, };
    case 'products/query/success':
      return { ...state, loading: false, list: payload };
    default
      return state;
  }
}

app.model({
  reducer
})

これにより、いくつかの高次の方法をレデューサーに適用することが可能になります。

Reduxの記述スタイルは簡潔で、状態を変更するために必要な行は1行だけですが、数行のコードが構文糖衣構文で一緒に記述されているようです。ただし、残りのステータスを次のストップに配信するには、 ...stateを使用する必要があります。そうしないと、ステータスが不完全になります。つまり、reduceフェーズ中に、誤って書き込まれると、一部の状態が失われる可能性があります。

いくつかの点で、Vuexのアイデアは読みやすく、より自然です。このようなものを書いてください（正確ではありません）。

const mutation = {
  ['products/query'](state) {
    state.loading = true
  },
  ['products/query/success'](state, payload) {
    state.loading = false
    state.list = payload
  }
}

コードに関しては、（同期的に）どの状態を変更するかだけを気にします。 Vuexはまた、州の次の停車地への配達のために外側の層を包む必要があります。おそらく、配達前にいくつかの防御チェック（推測）も行われるか、フックが植えられます。

dvaの公式ウェブサイトのサンプルページが出てエラーを報告できないかどうか私に尋ねてください、それはアップグレードですか？

同様にしてください

['products/query']: function*() {}
['products/query'](state) {}

構文は何ですか？配列を関数名として使用できますか？

ES6では、リテラルでオブジェクト（式）をオブジェクトのプロパティ名として定義できます。つまり、式を角かっこで囲みます。
そのような

obj = {
  ['xxname']: 'what ever you defined',
  ['xxyy'](args) {
    ....
  }
}

質問があります。「products/query」はレデューサーの呼び出しを処理するために使用され、文字列を介して名前空間に関連付けられます。後で、プロジェクトが大きくなった場合（数百のメソッドなど）。私の名前空間を変更する必要がある場合。 100のメソッドを変更するには？

@yesmeck👍 、レデューサーエンハンサーの役割は以前は過小評価されていました。

ここでサポートがあるかどうかわかりませんか？