2017-07-26 20 views
0

フォームの要素をAJAX呼び出し(たとえば、重複したテキスト入力)から注入するフォームを作成しています。AJAX呼び出しの後にRedux InitialValuesを更新します。

すべてがうまくいっていますが、フォームを更新していますが、のデフォルト値の値は、私のreduxストアの最初のフォームの状態に戻っています。以下はフォーム要素を追跡する私のカスタムレデューサーです。新しい値を初期状態に戻すことはできますか?

//Schema Reducer 
case "UPDATE_SCHEMA_FULFILLED":{ 

     let s = {...state.schema} 
     for (let key in action.payload){ 
      if(s.hasOwnProperty(key)){ 
       if(key == 'values'){ 
        s[key] = {...s[key], ...action.payload[key]} 
       }else{ 
        s[key] = [...s[key], ...action.payload[key]] 
       } 

      } 
     } 

     state = { ...state, 
      loaded: true, 
      schema: {...s}, 
     } 
     break; 
    } 

私のフォームは、ドキュメントごとのように第1の負荷に初期値を追加します

CustomForm = connect(
    state => ({ 
initialValues: state.schema.schema.values 
    }), 
    dispatch => ({ 
    onSubmit: data => dispatch(saveForm(data)) 
    }) 
)(CustomForm) 

これがアクションを生成しているものです。

import React from 'react' 
import { addSchema } from '../actions/schemaActions' 

export default class VirtualButton extends React.Component { 
constructor(){ 
    super(); 
    this.generateNewLayout = this.generateNewLayout.bind(this) 
} 

generateNewLayout(e){ 
    e.preventDefault(); 
    this.props.dispatch(addSchema(this.props.owner)); 
} 

render(){ 

    return <div className="cf__virtual-action"><a href="" onClick={this.generateNewLayout}>Create New</a></div> 

} 
} 

答えて

0

これが動作しているようだが、私はそれがperformantかどうか分からないのですか?値を初期化する機能を小道具を介してアクションに追加する:

//My button that dispatches the initial call: 
this.props.dispatch(addSchema(this.props.owner, this.props.initialize, this.props.initialValues)); 

export function addSchema($id, initialize, initial){ 
return function(dispatch) { 
    axios.post(config.api+'forms/schema/virtual/'+$id) 
    .then((response) => { 
     dispatch({type: 'UPDATE_SCHEMA_FULFILLED', payload: response.data}) 
     initialize({...initial, ...response.data.values}); 
    }) 
    .catch((error) => { 
     console.log(error); 
    }) 
} 
} 
関連する問題