redux形式の入力値を配列にプッシュする方法は？

Question

私はreduxで配列として格納する必要がある同じ型の複数の入力値を収集するredux-form Wizard Formを作成しています。コンテキストの場合、フォームは、いくつかの各セット（通常3〜5セット）で持ち上げられたウェイトの量を表すNumber値を収集しています。運動タイプごとに、配列が格納されている必要があります。例：

form: { 
    workout: { 
    values: { 
     deadlifts: [150, 160, 170, 180], 
     bench-press: [135, 155, 175], 
     etc ... 
    } 
    } 
} 

私の問題は、値を送信するだけで以前の値が上書きされることです。私は、（1）reducexストア値を配列として初期化する方法、および/または（2）それらの配列に新しい値をプッシュする方法がわかりません。

各エクササイズにはウィザードフォームがあります。ウィザードフォームは、いくつかのWorkoutFormコンポーネントで構成されています。ウィザードフォームは、運動名、セット数などの関連情報をワークフォームにcurrentExerciseで渡します。 setIndexはウィザードフォームコンポーネントの状態であり、カレットセットを追跡します。

WorkoutForm

const WorkoutForm = ({ currentExercise, setIndex, handleSubmit }) => { 

    return (
    <form onSubmit={handleSubmit}> 
     <Field 
     name={currentExercise.name} 
     type="number" 
     placeholder={`enter ${currentExercise.track}`} 
     component={renderField} 
     label="exercise" /> 
     <div> 
     <button type="submit" className="next">Submit</button> 
     </div> 
    </form> 
) 
} 

WorkoutForm.propTypes = { 
    handleSubmit: PropTypes.func.isRequired, 
    currentExercise: PropTypes.shape({ 
    name: PropTypes.string.isRequired, // such as 'deadlift' 
    reps: PropTypes.array.isRequired, // reps for each set, such as [10,8,6,4] 
    track: PropTypes.string.isRequired, // either 'weight' or 'reps' 
    }).isRequired, 
}; 

export default reduxForm({ 
    form: 'workout',    // <------ same form name 
    destroyOnUnmount: false,  // <------ preserve form data 
    validate 
})(WorkoutForm) 

RenderField

const renderField = ({ input, label, type, placeholder, meta: { touched, error } }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <input {...input} placeholder={placeholder} type={type} /> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
) 

export default renderField 

Answer 1

ここに私の暫定的なソリューションです。インスピレーションのためelmeisterに感謝します。

アクションクリエーター

function setExerciseData(exerciseName, value) { 
    return { 
    type: 'SET_EXERCISE_DATA', 
    exerciseName, 
    value, 
    } 
} 

export function gatherFormData(exerciseName) { 
    return (dispatch, getState) => { 
    const form = getState().form; 
    const value = form.workout.values[exerciseName]; 
    dispatch(setExerciseData(exerciseName, value)) 
    } 
} 

リデューサー

import update from 'immutability-helper'; 

function setExerciseData(state, exerciseName, value) { 
    if (!state[exerciseName]) { 
    return Object.assign({}, state, { [exerciseName]: [value]}) 
    } else { 
    return update(state, { 
     [exerciseName]: {$push: [value]} 
    }) 
    } 
} 

gatherFormDataアクションが提出入力にトリガされます。コメントがあれば、より良い解決策を楽しむことができます。ありがとう！