React-Native + Redux：フォームフィールドの乱数

Question

私はreact-native、redux、およびsagaの初心者です。私が解決策を見つけることができなかったユースケースに入りました。状態をプロパティにマップし、アクション、レデューサー、およびサガの間で状態を渡す方法を理解しています。これはこれまでのところ私にとって意味があります。これは物事がうんざりしているようです。私は、データベースから返されるものに応じて、任意の時点で可変数のフォームフィールドを必要とするフォームを持っています。一例として、

、のは、私はこのような構造を持っているとしましょう：

{ 
    name: ‘’, 
    vehicleMake: ‘’, 
    vehicleModel: ‘’, 
    carLotCity: ‘’, 
    carLotState: ‘’, 
    carLotZipCode: ‘’, 
    localPartsManufacturers: [{name: ‘’, address: ‘’, zipCode}] 
} 

名からcarLotZipCodeにすべてが唯一の1つのテキストフィールドを必要とする、しかし、localPartsManufacturers配列は、それぞれがあろうと、オブジェクトの任意の数を表すことができオブジェクトごとに独自のテキストフィールドセットが必要です。フィールドを状態にマッピングし、その状態にプロパティをマッピングするまでは、どのようにすれば還元するのでしょうか？私はこのシナリオから始める方法について混乱しています。フィールドが修正されたときにマッピングを投影する方法を理解しています。

Answer 1

私はバックエンドから来ているので、データを保持します。そうすれば、それを正常化することは避けられます。私は、フィールドをレンダリングするときに、よりスマートにする必要があると思います。ここでは、私が示唆されてるものです：あなたが店でそれを持っているように

function onTextFieldChange(name, index) { 
    // either name = `name`, `vehicleMake`, ... 
    // or 
    // name = `localPartsManufacturers` and `index` = 0 
} 

function createTextField(name, index) { 
    return <input 
    type='text' 
    name={ name } 
    onChange={() => onTextFieldChange(name, index) } />; 
} 

function Form({ fields }) { 
    return (
    <div> 
     { 
     Object.keys(fields).reduce((allFields, fieldName) => { 
      const field = fields[fieldName]; 

      if (Array.isArray(field)) { 
      allFields = allFields.concat(field.map(createTextField)); 
      } else { 
      allFields.push(createTextField(fieldName)); 
      } 
      return allFields; 
     }, []) 
     } 
    </div> 
); 
} 

Formは、すべてのデータを受け取ります。次に、フィールドが配列かどうかを確認します。配列の場合は、内部のフィールドをループし、他のプロパティと同じ入力を生成しますcreateTextField。ここの難しい部分は、ストア内のデータを更新する方法です。テキストフィールドのデータが変更されたときにindexを渡していることに注意してください。減速機では、次のような記述が必要です。

case FIELD_UPDATED: 
    const { name, index, value } = event.payload; 

    if (typeof index !== 'undefined') { 
    state[name][index] = value; 
    } else { 
    state[name] = value; 
    } 
    return state; 

Answer 2

リスト、マップ、セット、またはその他のオブジェクトをReduxに保存することが妨げられることはありません。

残りの唯一のことは、状態をあなたの小道具にどのようにマッピングし、どのように使用するかです。コレクションの1つの要素を小道具にマッピングする代わりに、コレクション全体を1つの小道具にマッピングしてから、レンダリングメソッドでコレクションを反復処理します。

アクションでは、新しいコレクションを返すことができます。このコレクションは、フォームのフィールドで構成され、パーツリストを構成します。次に、減量兵がコレクション自体を置き換えます。

または、パーツコレクション内の要素を変更するときに、そのIDを持つアクションを送信して、減速機のコレクションで見つけ出し、変更された要素を置き換えるか、新しい要素を追加するか、削除した要素を削除します。