0

私は連絡先リストアプリを構築して自分自身にreactjsを教えようとしていますが、現在流動性を学んでいます。

1) 新しい連絡先が入力されます。送信すると、newContact以下を保持するオブジェクトが作成されます。

  • ファーストネーム
  • 苗字
  • Eメール
  • phone1 (最大 3 台の電話を追加できます)
  • 画像 (現在は単なるテキスト フィールドです。URL を追加できます..)

2) このnewContactオブジェクトはペイロードとして mycreateNewContactActionに送信され、ディスパッチャは新しい連絡先が作成されたことを「警告」されます。

3) この時点で、ContactStore の出番です。

ここまで目的を達成しました。このオブジェクトを自分のデータベースに保存したい場合、ここで行いますか?

次に何をするか少し混乱しています。私の最終目標は、リスト内のすべての連絡先を表示することです。そのため、新しい連絡先をすべてどこかに追加して、すべてをプルできるようにする必要があります。

誰かが私を正しい方向に向けることができますか?

4

3 に答える 3

0

createNewContactAction 関数を呼び出す前に、newContact オブジェクトを保存するようにサーバーに要求します。保存が成功した場合は、createNewContactAction を呼び出して newContact オブジェクトを ContactStore に保存できます。成功しない場合は、エラー処理を行うことができます。

ほとんどの場合、このパターンが望ましいと考える理由を理解するために、連絡先をストアに保存してからデータベースに保存しようとしたが、何らかの理由でデータベースに保存しようとして失敗したと想像してください。現在、ストアとデータベースは同期していないため、ストアへのすべての変更を元に戻して同期を取り戻す必要があります。最初にデータベースの保存が成功していることを確認すると、ストアとデータベースの同期を維持しやすくなります。

データベースの前にストアにデータを隠しておきたい場合がありますが、データベースに保存したいデータを含むフォームを送信するユーザーは、おそらくそのようなケースの 1 つではありません。

于 2015-12-27T19:24:34.890 に答える
0

API 呼び出しを処理するために追加のファイルを作成するのが好きです。ストアにすべての xhttp 呼び出しがあると、すぐに混乱する可能性があります。通常はストアにちなんだ名前を付けるので、この場合は「contacts-api.js」のようにします。API ファイルでは、必要なすべての API メソッドを含むオブジェクトをエクスポートします。たとえば、xhttp リクエストにスーパーエージェントを使用する場合:

module.exports = {
  createNewContact: function(data, callback) {
    request
      .post('/url')
      .send(data)
      .end(function(res, err) {
        if (callback && typeof callback === 'function') {
          callback(res, err);
        }
      });
  }
}

通常、リクエストごとに 3 つのアクションを作成することになります。最初の 1 つは、データを使用して最初の要求をトリガーすることです。次は結果の成功であり、最後はエラーの場合です。

各アクションのストア メソッドは、最終的に次のようになります。

onCreateNewContactRequest: function(data) {
  api.createNewContact(data, function(res, err) {
    if (err) {
      ContactsActions.createNewContactError(err);
    } else {
      ContactsActions.createNewContactSuccess(res);
    }
  });
},
onCreateNewContactSuccess: function(res) {
  // save data to store
  this.newContact = res;
},
onCreateNewContactError: function(err) {
  // save error to store
  this.error = err;
}
于 2015-12-27T22:46:50.117 に答える